React: Display element of array by id

Question

I'm trying to display an element from my items array. I can log the element to the console... but can't get it render. In my setState, I made itemDetail that takes the first element from the items array: (perhaps there's a better way to do that?)

this.setState({ items: items, itemDetail: items[0], value: this.state.value })

When I try to call {itemDetail} it is giving me the error:

"Objects are not valid as a React child (found: object with keys {id, name})...."

Full Code below. How can I render the first element from my array in React? Or better yet, display an element by Id. Thanks.

constructor(props){
    super(props);
    this.state = {
      items: []
    }
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  componentDidMount(){
    const items = [
      {
        'id': 0,
        'name': 'firstName'
      },
      {
        'id': 1,
        'name': 'secondName'
      }
    ];

    this.setState({ items: items, itemDetail: items[0] });
  }


  render(){

    const { items, itemDetail } = this.state;

    console.log(itemDetail);

    return(
      <div className="container">
        {itemDetail}
      </div>
    );
  }

Anton Tupy · Accepted Answer · 2018-01-18 03:55:33Z

1

React doesn't know how to render object itemDetail. Let's help him:

render(){

    const { items, itemDetail } = this.state;

    console.log(itemDetail);

    return(
        <div className="container">
            <div className="item-id">{itemDetail.id}</div>
            <div className="item-name">{itemDetail.name}</div>
        </div>
    );
}

Hope this will be useful.

answered Jan 18, 2018 at 3:55

Anton Tupy

9695 silver badges16 bronze badges

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

1 Comment

ghostdivider Over a year ago

This was useful. Thank you for the answer!

Rishikesh Dhokare · Accepted Answer · 2018-01-18 03:44:06Z

1

Your state has to be like following since you are accessing itemDetails in render()

this.state = {
    items: [],
    itemDetail: {} 
}

answered Jan 18, 2018 at 3:44

Rishikesh Dhokare

3,58727 silver badges35 bronze badges

1 Comment

ghostdivider Over a year ago

ahh, I missed this. Thank you!

simbathesailor · Accepted Answer · 2018-01-18 03:44:37Z

0

const itemsArray = this.state.items
return(
      <div className="container">
        {itemsArray && itemsArray[0]}
      </div>

if you are deciding based on some props or state value, you can do something like

const itemsArray = this.state.items
const slectedIndex = this.state.selectedIndex or this.props.selectedIndex//depends how you are getting selectedindex logic
return(
      <div className="container">
        {itemsArray && itemsArray[slectedIndex]}
      </div>

answered Jan 18, 2018 at 3:44

simbathesailor

3,6852 gold badges22 silver badges30 bronze badges

1 Comment

ghostdivider Over a year ago

Thank you for the answer! I was able to apply similar logic to solve my problem.

Collectives™ on Stack Overflow

React: Display element of array by id

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related