React - problems with checkbox

Question

I am trying to create a component with four options. The user is supposed to choose only one option. So if the user chooses another option, the previosluy selected ones should change to false. This is my code:


const riddles_ = [{
    id:2,
    options: ['A grandson','A daughter','A father','A nephew'],
    state_: [false,false,false,false]
    }]

function toggleToDo(o){ 
        riddles_.state_ = [false,false,false,false]
        riddles_.state_[o] = true
        console.log(riddles_.state_)
    }

    return (
        <div>
            <input type="checkbox" id="check1" checked={riddles_.state_[0]} onClick={(o)=>toggleToDo(0)}/>
            {riddles_.options[0]}
            <div className='space'></div>
            <input type="checkbox" id="check2" checked={riddles_.state_[1]} onClick={(o)=>toggleToDo(1)}/>
            {riddles_.options[1]}
            <div className='space'></div>
            <input type="checkbox" id="check3" checked={riddles_.state_[2]} onClick={(o)=>toggleToDo(2)}/>
            {riddles_.options[2]}
            <div className='space'></div>
            <input type="checkbox" id="check4" checked={riddles_.state_[3]} onClick={(o)=>toggleToDo(3)}/>
            {riddles_.options[3]}
        </div>
    )
}

When the user clicks on a checkbox, it just turns true or false, and generates no change in the others. I know the riddles_.state_ array is changing but the checkbox don´t seem to be able to take its value.

Your not re rendering the component. You need to use the useState() hook. — Steve K
– Steve K, Commented Jan 7, 2022 at 21:53

Bona Ws · Accepted Answer · 2022-01-08 18:38:08Z

1

Its a best practice to use set method frome useState hooks when u work with state, using react functional components.

Example :

const init_state = [false,false,false,false]
const [checked_state, setCheckedState] = useState(init_state);

function toggleToDo(o){ 
        const current_state = [false,false,false,false]
        current_state[o] = true;
        setCheckedState(current_state);
    }

    return (
        <div>
            <input type="checkbox" checked={checked_state[0]} onClick={(o)=>toggleToDo(0)}/>
            option1
            <div className='space'></div>
            <input type="checkbox" checked={checked_state[1]} onClick={(o)=>toggleToDo(1)}/>
            option2
            <div className='space'></div>
            <input type="checkbox" checked={checked_state[2]} onClick={(o)=>toggleToDo(2)}/>
            option3
            <div className='space'></div>
            <input type="checkbox" checked={checked_state[3]} onClick={(o)=>toggleToDo(3)}/>
            option4
        </div>
    )
}

edited Jan 8, 2022 at 18:38

answered Jan 7, 2022 at 22:17

Bona Ws

3561 silver badge11 bronze badges

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

1 Comment

AWolf Over a year ago

I'm adding a Codesandbox with a working demo. It's doing the same thing as in Bona's answer.

Collectives™ on Stack Overflow

React - problems with checkbox

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related