React JS How to make some checkboxes checked, based on an array of checked values

Question

I am a newbie to React, and working on a React JS application. I need to make some checkboxes to be checked default based on a set of values in an array. The domain value set is in another array.

Tried to accomplish the task using a nested loop with array.map()
Also, tried to make a callback function within a single loop and tried with array filtering as well. None of them worked correctly:

// Set of possible check box values ( file: person.jsx )
Domain=[
     { id:0, name:"apple", value:"Apple" },
     { id:1, name:"orange", value:"Orange"  },
     { id:2, name:"banana", value:"Banana"  },
     { id:3, name:"rGrape", value:"Red grapes"  },
     { id:4, name:"gGrape", value:"Green grapes"  },
]


// a single user's preferences ( file: person.jsx )
state={
    userid:0, 
    name:"Tom",
    gender:"Male",
    age:20,
    fruits:["apple", "rGrape"] 
}

The partial code Implemented inside render():

// ( file: person.jsx , inside render() )
{ 
this.Domain.map( 
    (fruit, index) => (
        //console.log();
        <p>
            <li key={fruit.id}>  
                <input type="checkbox" 
                    defaultChecked=
                    { //false //if set to false all unchecked
                        this.state.fruits.map(
                            (stateFruit) =>( 
                                 if(fruit.name === stateFruit)
                                        return true;
                                 else
                                        console.log(false);
                                 console.log(fruit.name === stateFruit)
                            )
                        )
                    } 
                    onChange={this.handleChangeChk} /> {fruit.value}
            </li>
        </p>
    )
)
}

I expected this only checks user selected fruits but it checks every checkbox. It would be great if anybody could suggest a method to accomplish this task, may be with a different approach.

The code you've shown doesnt run at all.

Jonas Wilms
– Jonas Wilms

2019-04-26 07:03:05 +00:00
Commented Apr 26, 2019 at 7:03 — Jonas Wilms
– Jonas Wilms, Commented Apr 26, 2019 at 7:03

Wai Ha Lee · Accepted Answer · 2019-04-26 08:01:35Z

1

You actually want to check whether the array of the fruits includes the name:

this.state.fruits.includes(fruit.name)

edited Apr 26, 2019 at 8:01

Wai Ha Lee

8,856102 gold badges61 silver badges100 bronze badges

answered Apr 26, 2019 at 7:05

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vikas Singh · Accepted Answer · 2019-04-26 07:15:58Z

1

You can achieve this by using javascript includes or contains

{ 
this.Domain.map( 
    (fruit, index) => (
        //console.log();
        <p>
            <li key={fruit.id}>  
                <input type="checkbox" 
                    defaultChecked=
                    { //false //if set to false all unchecked
                        this.state.fruits.includes(fruit.name)
                    } 
                    onChange={this.handleChangeChk} /> {fruit.value}
            </li>
        </p>
    )
)
}

answered Apr 26, 2019 at 7:15

Vikas Singh

1,8651 gold badge18 silver badges27 bronze badges

Comments

Murtaza Hussain · Accepted Answer · 2019-04-26 07:23:47Z

1

in your case map returns an array of booleans that would always set to true you need to use includes to return a single boolean value

{ 
this.Domain.map( 
    (fruit, index) => (
        //console.log();
        <p>
            <li key={fruit.id}>  
                <input type="checkbox" 
                    defaultChecked=
                    {
                        this.state.fruits.includes(fruit.name)
                    } 
                    onChange={this.handleChangeChk} /> {fruit.value}
            </li>
        </p>
    )
)
}

For more details check includes and map

edited Apr 26, 2019 at 7:23

answered Apr 26, 2019 at 7:16

Murtaza Hussain

4,3631 gold badge30 silver badges31 bronze badges

Collectives™ on Stack Overflow

React JS How to make some checkboxes checked, based on an array of checked values

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related