React-Hook conditional rendering (no error, but don't work)

Question

I have have no error in my code. But my condition, finally don't work.

  const togglePeronsHandler = () => {
    const doesShow = personsState.showPersons;
    personsState.showPersons = !doesShow;

    console.log(personsState);
  }

  (...)

  <button className="btn btn-sm btn-primary" 
    onClick={togglePeronsHandler}>Toggle Person
  </button>
  <div className="persons">
      {
       personsState.showPersons === true ?
     (
   personsState.persons.map( (item, index) => (
   <Person name={ item.name }
           index={index}
           age={ item.age }
           click={switchNameHandler}
           changed={nameChangeHandler}/>
  ))
 ) :
 (
   <div className="alert alert-info">No body</div>
 )
}

When I click on button, personsState.showPersons passed true/false. But rendering it wasn't effect…

At origin, i have change setPersonState but it didn't do anything...

Sandbox : https://codesandbox.io/s/3yn05lro81

jabsatz · Accepted Answer · 2019-03-22 15:15:59Z

1

Since personsState is immutable, you can't re-assign it. You have to set it with setPersonsState like you did in the other functions.

I see you need the previous state in order to do that (that's probably where your confusion came from). Apart from the object syntax of setState({...newState}) there is another syntax that takes a callback function: setState(previousState => { return {...newState} }). This is solved using this callback setState syntax.

This way, your togglePersonsHandler function would look like this:

const togglePersonsHandler = () => {
  setPersonsState(previousPersonsState => {
    const doesShow = previousPersonsState.showPersons;
    return {
      ...previousPersonsState,
      showPersons: !doesShow
    };
  });
};

Good luck!

answered Mar 22, 2019 at 15:15

jabsatz

3514 silver badges10 bronze badges

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

1 Comment

Reuno92 Over a year ago

Thank you, it looks like Redux.

jsdeveloper · Accepted Answer · 2019-03-22 15:14:52Z

0

I thnk you need to call setPersonsState in your toggle function:

  const togglePeronsHandler = () => {
    const doesShow = personsState.showPersons;
    setPersonsState({showPersons:!doesShow, persons: personsState.persons});
  }

Without setPersonsState, your component will not rerender.

answered Mar 22, 2019 at 15:14

jsdeveloper

4,0751 gold badge18 silver badges15 bronze badges

Collectives™ on Stack Overflow

React-Hook conditional rendering (no error, but don't work)

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related