samedi 21 décembre 2019

How can I avoid rendering check box numbers?

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 enter image description here




Aucun commentaire:

Enregistrer un commentaire