Reading array values inside jsx

Question

In my Next.JS app,I'm passing an array as a prop to OrderViewer component, but when I'm trying to read items of the passes array inside JSX, the following error is thrown.

Unhandled Rejection (TypeError): Cannot read property '0' of null

getOrderData = ID => {
  if (ID !== null){
    this.prt.style.display = "block";
    console.log(ID) //This works well.but it doesn't work inside JSX.
    console.log(`type = ${typeof(ID)}`)
  }
}

render(){
  return(
    <div ref={ref => this.prt = ref} onLoad= {this.getOrderData(this.props.orderId)} style={{display: "none"}}>
      <div id="OOP" className="row">
        <div className={"row"}>
          <div className="col-md-1">{this.props.orderId}</div>
          <div className="col-md-10"></div>
          <div className="col-md-1"></div>
        </div>
        <div></div>
      </div>
    </div>)
}

Are you initializing React's state of the OrderView component? — ahz
– ahz, Commented Jan 20, 2019 at 13:16
Yes..it successfully logs array elements in getOrderData method but doesn't work inside jsx.. — Pavindu
– Pavindu, Commented Jan 20, 2019 at 13:18
In getOrderData you are checking if it is not null, but not in jsx part. So it is logged out only if not null... — ahz
– ahz, Commented Jan 20, 2019 at 13:30
when I use this.props.orderId it prints the whole array.but doesn't work with indices. — Pavindu
– Pavindu, Commented Jan 20, 2019 at 13:42

Sahil Raj Thapa · Accepted Answer · 2019-01-20 17:18:58Z

1

In your code, Orders component has state as:

constructor(props){
  super(props);
  this.state = {
    orderId: null
  }

you are passing Orders component state as props to OrderViewer component

<OrderViewer orderId={this.state.orderId}/>

Inside OrderViewer component

 // Remember "this.props.orderId" is null 
        getOrderData = ID => {  
            // ID is equal to null so this block is not executed 
            if (ID !== null){
                this.prt.style.display = "block";
                console.log(ID[0]) 
            }
        }

        render(){
            return(
                <div ref={ref => this.prt = ref} onLoad= 
        {this.getOrderData(this.props.orderId)} style={{display: "none"}}>
                    <div id="OOP" className="row">
                       <div className={"row"}>
                         // <div className="col-md-1">{this.props.orderId[0] !== null ? this.props.orderId[0] : " "}</div>                              
                                                         // ^^^^^^^^ you are trying to 
                                                         // access "0" index element of null
                            <div className="col-md-10"></div>
                            <div className="col-md-1"></div>
                        </div>
                        <div></div>
                    </div>

So change

<div className="col-md-1">{this.props.orderId[0] !== null ? this.props.orderId[0] : " "}</div>

to

<div className="col-md-1">{this.props.orderId !== null ? this.props.orderId[0] : ""}</div>

or

<div className="col-md-1">{this.props.orderId && this.props.orderId[0]}</div>

Both will check the value of orderId and does something.

In second case if orderId is null/ false it will not execute code after "&&" operator and if it is not null/ true it will execute the code after "&&" operator i.e. it will return first or "0" index element from the orderId.

edited Jan 20, 2019 at 17:18

answered Jan 20, 2019 at 15:08

Sahil Raj Thapa

2,4833 gold badges16 silver badges25 bronze badges

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

5 Comments

Pavindu Over a year ago

But the problem is that console.log(ID[0]) in getOrderData works well though it doesn't work inside JSX..and this still doesn't work

Pavindu Over a year ago

It prints the order id of the Order component.When I use this.props.orderId inside JSX, it prints out all the elements inside that div as '001Printed bagsCompleteMAS Holdingsmhc02542017-01-15.'in this case,ID[0] = "001" .

Sahil Raj Thapa Over a year ago

orderId is Array .i.e orderId = [ 001,Printed bags,Complete, MAS Holdings,mhc0254, 2017-01-15] i got that but what about the error is it gone?

Sahil Raj Thapa Over a year ago

you can use {this.props.orderId && this.props.orderId[0]}

Sahil Raj Thapa Over a year ago

it's my pleasure. Great it worked but the code {this.props.orderId !== null ? this.props.orderId[0] : "No order"} and {this.props.orderId && this.props.orderId[0]} means same

Collectives™ on Stack Overflow

Reading array values inside jsx

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related