rendering checkboxes with map in React

gistfile1.txt

render() {
	return (
		<React.Fragment>
			<div>
				<label>Name:</label>
				<input name="name" type="text" value={this.state.name} onChange={this.updateFormField}/>
			</div>
			<div>
			<label>Favourite Colour:</label>
				{this.renderColours()}
			</div>
			<div>
				<label>Country:</label>
				<select name="country" value={this.state.country} onChange={this.updateFormField}>
					{this.countries.map( (c)=><option key={c.value} value={c.value}>{c.display}</option>)}
				</select>
			</div>
			<div>
				<label>Fruits:</label>

				{this.fruits.map( (f)=>(
					<React.Fragment key={f.value}>
						<input type="checkbox" 
							name="fruits" 
							value={f.value}
							checked={this.state.fruits.includes(f.value)}
							onChange={this.processCheckbox}
						/><span>{f.display}</span>
					</React.Fragment>
				))}

				<input type="checkbox"
					name="fruits" 
					value="apple" checked={this.state.fruits.includes('apple')}
					onChange={this.processCheckbox}
				/>Apple

				<input type="checkbox" name="fruits" 
					   value="orange" 
					   checked={this.state.fruits.includes('orange')}
					   onChange={this.processCheckbox}/>Orange

				<input type="checkbox" name="fruits" 
					   value="pineapple" 
					   checked={this.state.fruits.includes('pineapple')}
					   onChange={this.processCheckbox} />Pineapple
			  
				<input type="checkbox" name="fruits" 
					   value="durian" 
					   checked={this.state.fruits.includes('durian')}
					   onChange={this.processCheckbox}/>Durian
			</div>
			<button>Submit</button>
		</React.Fragment>
	)
}