I'm trying to create a comma-separated list of dietary restrictions based on checked boxes in a form. I managed to make a comma-separated list, but I can’t find a way to keep the app from rendering a number when I click on a checkbox. Please see below:
class App extends Component {
constructor() {
super()
this.state = {
firstName: "",
lastName: "",
age: "",
gender: "",
destination: "",
dietaryRestrictions: {
isVegan: false,
isKosher: false,
isLactoseFree: false
}
}
this.handleChange = this.handleChange.bind(this)
}
{…more code..}
render() {
const dietR = []
return (
<main>
{…more code..}
[Your dietary restrictions:
{this.state.dietaryRestrictions.isKosher ? dietR.push("Kosher"):null}
{this.state.dietaryRestrictions.isLactoseFree ? dietR.push("Lactose-Free"):null}
{this.state.dietaryRestrictions.isVegan ? dietR.push("Vegan"):null}
<p>{dietR.join(", ")}</p>
</main>
)
Note the “123” after “dietaryRestrictions" in the screenshot
Aucun commentaire:
Enregistrer un commentaire