TypeError: undefined for array in React

Question

I am trying to use an array defined as a const in React, and pass this array in my App function. However, when I try to use it, I am getting a "TypeError: products is undefined" (in regards to <li> {products[0].id}</li>).

Any help would be much appreciated. I have attached my App.js file, and stripped the application down to it's bare to attempt to single out the issue.

The link to the complete project can be found here: https://github.com/coopertim13/ProblematicReact

import React, { useState } from 'react';
import ReactDOM from 'react-dom'

const products = [
  {id: 'P1000', name:'UGG', category: 'Cool'}
]

const App = (props) => {
  const {products} = props

  return (
    <div>
      <ul>
        <li> {products[0].id}</li>
      </ul>
    </div>
  )
}

ReactDOM.render(
  <React.StrictMode>
    <App products = {products}/>
  </React.StrictMode>,
  document.getElementById('root')
);

export default App;

Yatrix · Accepted Answer · 2020-08-09 16:42:12Z

1

The error tells you what you need to know. Your prop on App is called units, but you're trying to destructure products from it, which is undefined.

Change const {products} = props to const {units} = props and then change <li> {products[0].id}</li> to <li> {units[0].id}</li>.

You could also alias it like so, const {units: products} = props and leave the rest of your code.

Edit

After pulling down the repo, there are several issues I found.

// App.js
// Change the code to this,

import React, { useState } from 'react'
import ReactDOM from 'react-dom'

const Unit = ({ unit }) => {
    const [title, setCase] = useState(unit.title)

    const goUp = () => setCase(String(title).toUpperCase())
    const goDown = () => setCase(String(title).toLowerCase())

    return (
        <div>
            <span>
                {unit.code} - {title}: {unit.offering}
            </span>
            <button onClick={goUp}>Up</button>
            <button onClick={goDown}>Down</button>
        </div>
    )
}

const App = ({ units }) => {
    return (
        <div>
            <ul>
                {units.map(unit => (
                    <Unit key={unit.code} unit={unit} />
                ))}
            </ul>
        </div>
    )
}

export default App

In index.js, change it to this:

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import * as serviceWorker from './serviceWorker'

const units = [
    { code: 'COMP1010', title: 'Fundamentals of Computer Science', offering: ['S1', 'S2'] },
    { code: 'COMP1750', title: 'Introduction to Business Information Systems', offering: ['S1'] },
    { code: 'COMP2110', title: 'Web Technology', offering: ['S1', 'S2'] },
    { code: 'COMP2750', title: 'Applications Modelling and Development', offering: ['S1'] },
    { code: 'MMCC2045', title: 'Interactive Web Design', offering: ['S2'] },
    { code: 'COMP3120', title: 'Advanced Web Development', offering: ['S2'] },
    { code: 'COMP3130', title: 'Mobile Application Development', offering: ['S1'] }
]

ReactDOM.render(
    <React.StrictMode>
        <App units={units} />
    </React.StrictMode>,
    document.getElementById('root')
)

serviceWorker.unregister()

What was happening is this: <App /> was expecting the units to be passed to it so it could pass it to <Unit />. However, in index.js, you weren't passing in the units prop. So, I moved the units array to index and passed it in and it worked fine.

edited Aug 9, 2020 at 16:42

answered Aug 9, 2020 at 15:39

Yatrix

13.9k17 gold badges57 silver badges83 bronze badges

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

6 Comments

CoopDaddio Over a year ago

Unfortunately this does not fix the issue. I am now just getting TypeError: units is undefined

CoopDaddio Over a year ago

Have edited my question accordingly, however the issue still remains

Yatrix Over a year ago

@CoopDaddio what happens if you remove const {products} = props? It should use the products array outside of the component. Does that work?

CoopDaddio Over a year ago

I have been learning using this resource fullstackopen.com/en/part2/rendering_a_collection_modules and this is not how they recommend implementing it

CoopDaddio Over a year ago

I have also found that this implementation means I'm not able to pass data into a separate function as a prop

|

Bhuwan Adhikari · Accepted Answer · 2020-08-09 15:34:27Z

0

Use const products = props.units instead.

answered Aug 9, 2020 at 15:34

Bhuwan Adhikari

1,0191 gold badge12 silver badges24 bronze badges

3 Comments

CoopDaddio Over a year ago

On line 9? Unfortunately this did not fix the issue

Bhuwan Adhikari Over a year ago

@CoopDaddio Here is working link codesandbox.io/s/…

CoopDaddio Over a year ago

That may be the case, but unfortunately still not working on my local machine - maybe a much larger issue is at bay

Collectives™ on Stack Overflow

TypeError: undefined for array in React

2 Answers 2

Edit

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Edit

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related