How to display objects in array on screen in Reactjs

Question

I have a list of results where each result has the following data: id, title, system, unit. This data is in the form of an object, e.g: ({id:1, title: "main engine", system: "ship", unit: "C"}).

Each result has an onclick that calls a my addFunc function that is a state. This looks like this:

class Search extends Component {
  constructor(props) {
    super(props);
    this.addFunc = this.addFunc.bind(this);
    this.state = { selectedData:[] }
  }
  addFunc(resultdata) {
    var joined = this.state.selectedData.concat(resultdata);
    this.setState({ selectedData: joined })
    console.log(joined)
  }

Currently, each object is added to my joined array when clicked, and I can see it in my console. I want to display this on the screen

Hi, Develoweb Co! Welcome to SO! Typically, in React, to display something you include it in your render() method, have you tried this? — HoldOffHunger
– HoldOffHunger, Commented Jun 19, 2020 at 17:58
Hi, Develoweb Co! Let me know if my answer helped any! Feedback is always welcome. Thanks! — HoldOffHunger
– HoldOffHunger, Commented Jun 19, 2020 at 18:33
Hi, thanks for your answer. I tried calling {this.state.selectedData} in my render() method, but this causes an error because my selectedData is an array of objects. for example, [{id:1, title: 'title'}, {id:2, title: 'hello'}]. How can I display this kind of data? — Develoweb Co
– Develoweb Co, Commented Jun 20, 2020 at 1:48

HoldOffHunger · Accepted Answer · 2020-06-19 17:59:55Z

1

Try displaying your data by using the render() method in ReactJS.

class Search extends Component {
    // ...
    render() {
        return (
            <div>
                {this.state.selectedData}
            </div>
        );
    }
}

It seems you are storing this to the state as { selectedData: joined }, so this should work fine. Your constructor correctly initializes the state as so, this.state = { selectedData:[] }, so, hopefully this fix works right out of the box.

Find out more about render() from the ReactJS Docs: Rendering Elements.

answered Jun 19, 2020 at 17:59

HoldOffHunger

21.3k11 gold badges123 silver badges146 bronze badges

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

2 Comments

Develoweb Co Over a year ago

This produces error, because my selecteddata is an array of objects, so I dont think it can just be displayed like this.

Develoweb Co Over a year ago

My selectedData would look something like this, for example: [{id:1, title: 'title'}, {id:2, title: 'hello'}]

Collectives™ on Stack Overflow

How to display objects in array on screen in Reactjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related