Prop is undefined when passed to functional component in react

Question

I am trying to include PrintGrid functional component in my LoadGridData component. The PrintGrid should receive a document_id of firebase from LoadGridData. But inside the return statement of the LoadGridData, I try to pass the grid_id which is in a grid_data list to PrintGrid and it causes grid_id value to be undefined.

function PrintGrid(grid_id) {
  console.log('Print grid_id in PrintGrid: ', grid_id);

The below gives an error that it cannot access index 0 of undefined.

{grid_data && <PrintGrid grid_id={grid_data[0]} />}

With only the following statement, it updates the grid_data[0] value (grid_id) to the webpage.

{grid_data && <p> {grid_data[0]} </p>}

I see an error in function PrintGrid definition - the argument grid_id should be enclosed in { } - i.e. function PrintGrid({ grid_id }) (so that the props are deconstructed into the grid_id). However, that should not be causing the other problem. Please provide more code. The LoadGridData code. Also, the connection of document_id to the rest is unclear. — exmaxx
– exmaxx, Commented Feb 8, 2020 at 4:11

varoons · Accepted Answer · 2020-02-07 23:38:50Z

4

You are not passing the props object and just passing grid_id direct to PrintGrind function

Change

function PrintGrid(grid_id) {

to

function PrintGrid({grid_id}) {

The above is the ES6 way of de-structuring objects and getting fields within directly.

You could also just do PrintGrid(props) and inside the function access props.grid_id

function PrintGrid(props) {  
    console.log(props.grid_id)
}

answered Feb 7, 2020 at 23:38

varoons

3,8871 gold badge18 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

Prop is undefined when passed to functional component in react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related