How to set initial useState value in React based on props

user_5968663 0
Viewed 480

I currently set my active state to 0:

const [active, setActive] = useState(0);

but I'm wondering how I can set the initial value to null if one of my component props: isFilterMode is true? So the initial state is "dynamic" based on the props?

use-state reactjs javascript
3 Answers

Try like below

const [active, setActive] = useState(props.isFilterMode ? null : 0);

Or

using a callback function (lazy initialisation)

const [active, setActive] = useState(() => props.isFilterMode ? null : 0);
user_85104050 
const Component = ({ isFilterMode }) => {
  const [active, setActive] = useState(() => isFilterMode ? null : 0);
  ...
}
user_50799240

you can define an expression with a return value as an argument for useState. With a ternary operator like props.isFilterMode ? null : 0 you would return null if the value of props.isFilterMode evaluates to true and 0 otherwise. So in useState you would have:

  const [active, setActive] = useState(props.isFilterMode ? null : 0);

And like Amila suggested in the other answer you can use a callback as a parameter to useState and whatever is evaluated and returned from that callback would be your initial state using arrow functions you would do something like:

 const [active, setActive] = useState(() => props.isFilterMode ? null : 0);

or more explicitly but with longer code:

  const [active, setActive] = useState(() => { if(props.isFilterMode){ return null;} else { return 0;} } );
user_106437450
Related