Running a Array of Objects outside render function

Question

Either fails to compile defining variables inside componentDidMount. I did a bunch of dozens of other ways. None seems to work for my particular piece of code. I think reading is better than trying to explain.

import React from 'react';
import { connect } from './api';
import './App.css';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      giphy: []
    }
  }

  componentDidMount(){
    connect(message => {
      this.setState({
        giphy: message
      })
    });
    var Items = this.state.giphy.map(function(gif){ // items is not defined.
      return <li>{gif}</li>;
    })
  }

  render () {
      return (
        <div className=".App-logo">
            <ul>
              { Items } // I wanted to show all items inside the array of objects.
            </ul>

            <ul className=".App-logo"> 
            // the following method works. We need to make sure to check for this conditions or wont work
              {this.state.giphy && this.state.giphy.length > 0   &&
                <img src={ this.state.giphy[2].images.original.url}
                alt="giphy.com animations"/>}
            </ul>
      </div>
    )
  }
}

If I remove the items, it will show the 2nd item in the state. Can you help to show all in the state?

You need to use the callback on setState, your array is not populated. `setState({}, () => { map state here}). — Neil
– Neil, Commented Sep 21, 2019 at 22:29
Hi staminna, check my solution and let me know if tha helps. — ravibagul91
– ravibagul91, Commented Sep 22, 2019 at 13:01

ravibagul91 · Accepted Answer · 2019-09-22 02:50:01Z

2

Instead of creating a variable in componentDidMount which cannot be used inside of render method, you can directly map your state in render method.

<ul>
   //This will show only `bitly_gif_url`
   {Array.isArray(this.state.giphy) && this.state.giphy.map(gif => <li>{gif.bitly_gif_url}</li>) } 
</ul>

Note: Your giphy array contains number of objects. From each object I have shown only bitly_gif_url using {gif.bitly_gif_url}, if you need to show any other item from your object you can change it's key.

You can show mutltiple item's at a time also,

<ul>
   //This will show `bitly_gif_url` and `embed_url` at a time
   {Array.isArray(this.state.giphy) && this.state.giphy.map(gif => <li>{gif.bitly_gif_url} {gif.embed_url}</li>) } 
</ul>

edited Sep 22, 2019 at 2:50

answered Sep 22, 2019 at 2:37

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

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

1 Comment

ravibagul91 Over a year ago

@DanielSmith, sure will look into it.

Mohammad Aslam · Accepted Answer · 2019-09-21 21:57:31Z

0

As you have defined Items inside your componentDidMount function it have a functional scope and will not be available inside render function what you can do is return the items from a function. So now your code will look something like

import React from 'react';
import { connect } from './api';
import './App.css';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      giphy: []
    }

  }

  componentDidMount(){
    connect(message => {
      this.setState({
        giphy: message
      })
    });
  }

  getItems() {
    return this.state.giphy.map(function(gif){
      return <li>{gif}</li>;
    })
  }

  render () {
      return (
        <div className=".App-logo">
            <ul>
              { this.getItems() } // I wanted to show all items inside the array of objects.
            </ul>

            <ul className=".App-logo"> 
            // the following method works. We need to make sure to check for this conditions or wont work
              {this.state.giphy && this.state.giphy.length > 0   &&
                <img src={ this.state.giphy[2].images.original.url}
                alt="giphy.com animations"/>}
            </ul>
      </div>
    )
  }
}

answered Sep 21, 2019 at 21:57

Mohammad Aslam

2503 silver badges14 bronze badges

2 Comments

staminna Over a year ago

Objects are not valid as a React child (found: object with keys {type, id, slug, url, bitly_gif_url, bitly_url, embed_url, username, images}). If you meant to render a collection of children, use an array instead.

Mohammad Aslam Over a year ago

as gif inside the map function is an object you need to replace {gif} with {<img src={gif.embed_url} />} i guess you get the gist.

Collectives™ on Stack Overflow

Running a Array of Objects outside render function

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related