useState with value that may be null

Question

I am new to React and have a question about useState. I have this code:

const [value, setValue] = useState(props.selectedNote.content);

The problem is that selectedNote is sometimes null and sometimes not. If it is null then this throws an error. How can I work around this?

Answer 1

Optional chaining is fantastic:

const [value, setValue] = useState(props.selectedNote?.content);

If you want a default value in the case that selectedNote (or content) is null/undefined then you can use nullish coalescing

const [value, setValue] = useState(props.selectedNote?.content ?? 'default');

Answer 2

You can try

const [value, setValue] = useState(props.selectedNote?props.selectedNote.content:null)

Answer 3

You can manage it with a ternary operator as suggested by @deepakgupta. Another possibility, useful when you have a lot of props to check, is that of assign defaultProps to the component. This will avoid all a bunch of check inside component body and let the code more clean.

function myComponent(props) {
    const [value, setValue] = useState(props.selectedNote.content);
}

myComponent.defaultProps = {
    selectedNote : {
        content : null
    }
    ...
    anotherProp : 'my default value'
}

Answer 4

It's depends from your application business logic.

1. Conditional Rendering

const Comp = (props) => {
   const [value, setValue] = useState(props.selectedNote?.content);

   return value ? < some your staff > : <SkeletonForNoValue />;
}

2. You may define default value

const Comp = (props) => {
   const [value, setValue] = useState(props.selectedNote?.content || defaultNote);

3. Push to another route

const Comp = (props) => {
   const [value, setValue] = useState(props.selectedNote?.content);

   useEffect(
     () => {
        history.push({
          pathname: '/path/to/go'
        }
     },
     [props.selectedNote]
   )

• about history - How to push to History in React Router v4?

4. Any other logic implementation...

Answer 5

Try this:-

const [value, setValue] = useState(props.selectedNote && props.selectedNote.content);

Answer 6

Try this : const [value, setValue] = useState(props.selectedNote?.content || defaultNote);