Set default usestate with array of objects from props

Question

I have a weird situation. I have the following code which is not working.

const [result, setResult] = useState(props.fileNamesStatus.map((file, i) => {
    return {
        key: file.fileStatus
    }
}));

Strangely though, it works sometimes and sometimes it does not. I have used it in the JSX as follows:

I get the error Cannot read property 'key' of undefined

<ul className="in">
     {props.fileNamesStatus.map((file, i) => {
           console.log(result[i].key)     /// Cannot read property 'key' of undefined
    
     })}
</ul>

Why do you copy props to state and then use props in render? Why do you need state at all? — Anastasiia Solop
– Anastasiia Solop, Commented Oct 28, 2020 at 14:46
@AnastasiiaSolop I am building a toggle feature inside a map. The toggle works on click, I am setting up state to keep track of its state (enable/disable) — user2281858
– user2281858, Commented Oct 28, 2020 at 14:48
It is generally a pretty bad idea to copy props to state and keep them in sync. It always leads to complications and other bugs. You should avoid it whenever you can. But if you have to, make sure that you run useEffect and copy props to state whenever they change, I'll add an example in an answer — Anastasiia Solop
– Anastasiia Solop, Commented Oct 28, 2020 at 14:51

Anastasiia Solop · Accepted Answer · 2020-10-28 14:53:53Z

1

You need to add another useEffect hook:

useEffect(() => {
  if (props.fileNamesStatus && props.fileNamesStatus.length) {
    setResult(props.fileNamesStatus.map((file, i) => {
      return {
        key: file.fileStatus
      }
    }))
  }
}, [props.fileNamesStatus])

But even with this change there is a chance that in your render props and state will be out of sync, so you should add additional check console.log(result[i] ? result[i].key : 'out of sync')

answered Oct 28, 2020 at 14:53

Anastasiia Solop

1,54314 silver badges23 bronze badges

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

2 Comments

user2281858 Over a year ago

i console logged props.fileNamesStatus inside useEffect and it is empty. Although data does exist in it.

Anastasiia Solop Over a year ago

Is it a simple array of objects? How do you know that data is in it if console log shows it's empty?

Collectives™ on Stack Overflow

Set default usestate with array of objects from props

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related