Array.find function in REACT JS Cannot read property of undefined

Question

I am new to REACT and trying to use array.find function. Getting error Cannot read property first_name of undefined. When I declare JSON array inside RenderIt function. Not sure, why REACT cannot see results array.

export default function App() {

  const [results, SetResults] = useState([])
  useEffect(() => {
    const JSON = [{
        EMPLID: '345386',
        first_name: 'David',
      },
      {
        EMPLID: '345397',
        first_name: 'Luca',
      },
    ]
    SetfName(JSON[0].first_name)
    SetResults(JSON)
  }, [])

  const RenderIt = () => {
    let found = results.find(element => element.EMPLID === '345397')
    return ( < div > {
        found.first_name
      } < /div>)
    }

    return ( <
      div className = "App" >
      <
      h1 > First Name < /h1> <
      h2 > {
        (RenderIt())
      } < /h2>       <
      /div>
    );
  }

Is SetfName a typo?

Maxqueue
– Maxqueue

2020-07-24 21:11:48 +00:00
Commented Jul 24, 2020 at 21:11 — Maxqueue
– Maxqueue, Commented Jul 24, 2020 at 21:11

Luke Storry · Accepted Answer · 2020-07-26 01:25:25Z

1

The function provided to useEffect only runs after the first render, so during that first render, results is [], so the find can't find anything and returns undefined, which in turn means that found is undefined, and thus doesn't have the first_name property, which is the error you're seeing.

You want to check whether results has anything, and the only optionally render the RenderIt stuff if so.

Put this at the bottom inside your h2:

{ results !== [] && RenderIt() }

Or you can change RenderIt to:

const RenderIt = () => {
    let found = results.find(element => element.EMPLID === '345397')
    if (!found) return '';
    return (<div> {found.first_name} </div>)
}

edited Jul 26, 2020 at 1:25

answered Jul 24, 2020 at 21:22

Luke Storry

6,7821 gold badge11 silver badges25 bronze badges

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

5 Comments

nk2020 Over a year ago

Thanks Luke. I tried this and getting same error message. { results !== [] && RenderIt() } Still not clear, the order of execution. If I use results.map inside RenderIt(), it works fine. However, if I use results.find it does not.

Luke Storry Over a year ago

try the second solution

nk2020 Over a year ago

Luke Storry, the second solution worked. Thanks for taking time and responding. So, is this right order of execution? 1. First render (results is set to []) 2. useEffect (results is set to [JSON]) 3. Second render (RenderIt() call gets first_name)

Luke Storry Over a year ago

Yeah! You can render "Loading..." or something in that first render too, whilst the json is being set

nk2020 Over a year ago

Thanks. Closing this request. Appreciate your input.

kodamace · Accepted Answer · 2020-07-24 21:37:48Z

0

I dont know but i think maybe setFName is the undefined?

const [fName, setFName] = useState("")

answered Jul 24, 2020 at 21:37

kodamace

4853 silver badges9 bronze badges

1 Comment

nk2020 Over a year ago

Please ignore this statement SetfName(JSON[0].first_name). I am sure its not causing issue.

Collectives™ on Stack Overflow

Array.find function in REACT JS Cannot read property of undefined

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related