get undefined for array element react

Question

I'm getting undefined when accessing element of array but console showed value when using the array name only. The code:

const Part = (props) => {
  return <p>{props.name} {props.exercises}</p>
}

const Content = (props) => {

  // when i use console.log(props[0])
  // it shows undefined
  // 
  // but when i use console.log(props)
  // it shows the array information as 
  // {parts: Array(3)}
  // parts: Array(3)
  // 0: {name: 'Fundamentals of React', exercises: 10}
  // 1: {name: 'Using props to pass data', exercises: 7}
  // 2: {name: 'State of a component', exercises: 14}
  // length: 3
  // [[Prototype]]: Array(0)
  // [[Prototype]]: Object

  return (
    <div>
       <Part parts={props[0]} />
    </div>
  )
}

const App = () => {
  const course = 'Half Stack application development'
  const parts = [
    {
    name: 'Fundamentals of React',
    exercises: 10
    },
  
   {
    name: 'Using props to pass data',
    exercises: 7
    },
  
  {
    name: 'State of a component',
    exercises: 14
  }
  ]

  return (
    <div>
      <Content parts={parts} />
    </div>
  )
}

So I don't understand why in Content, console.log(props) returns array info but console.log(props[0])says undefined, which gets nothing in App.

Update: Thanks for everyone's reply. Now I know if I use 'props.parts' inside Content, I will get the right result. Then I got another question (Sorry I'm new to JS and React) : Because 'parts' is defined in App and passed to Content. I shouldn't use or know 'parts' when defining Content. So why do I need to use 'props.parts' inside Content?

Use parts={props.parts[0]}, as you showed in example, props is an object with key as parts. — Rahul Kumar
– Rahul Kumar, Commented Nov 2, 2021 at 4:46

Mayank Pandeyz · Accepted Answer · 2021-11-02 04:44:30Z

1

// when i use console.log(props[0])
// it shows undefined

because the array variable name is parts as you have mentioned here:

// but when i use console.log(props)
// it shows the array information as 
// {parts: Array(3)}
// parts: Array(3)

So try this:

console.log(props.parts)

or

console.log(props.parts[0])

answered Nov 2, 2021 at 4:44

Mayank Pandeyz

26.3k4 gold badges43 silver badges61 bronze badges

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

Comments

Henryyy · Accepted Answer · 2021-11-02 04:50:05Z

0

console.log(props) not return array, it return object has 1 attribute name parts(parts is array)

=> Solution:

const Content = props => {
      const { parts } = props;
      return (
          <div>
             <Part parts=parts[0] />
          </div>
      )  
}

answered Nov 2, 2021 at 4:50

Henryyy

243 bronze badges

3 Comments

Henryyy Over a year ago

it same: const parts = props.parts;

Henryyy Over a year ago

you can read: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Henryyy Over a year ago

you can check here: codesandbox.io/s/fast-voice-e5zm3?file=/src/App.js

Collectives™ on Stack Overflow

get undefined for array element react

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related