CODEWITHSUNDEEP
javascriptarraysreactjs
Develoweb Co
Develoweb Co

Reputation: 41

How to display objects in array on screen in Reactjs

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

Upvotes: 1

Views: 434

Answers (1)

HoldOffHunger
HoldOffHunger

Reputation: 20881

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.

Upvotes: 1

Related Questions