How to render multiple component in reactjs, what i'm doing wrong?

Question

First i have a function to fetch data from database then

if the data be changed, i will create list components.

but it didnt work, what i'm doing wrong?

console:

class TweetContainer extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            tweetData:{}, 
            tweetRender : [],
            listTweet:[]
        }
    }

here is my function to fetch data from database

    componentDidMount(){
        
        fetch('http://localhost:5000/tweet')
        .then(function(response) {
            return response.json();
        })
        .then(result=>{
            this.setState({
                tweetData: result
            }, ()=>console.log(this.state.tweetData));
        });
        
    }

my function to make list component

    componentDidUpdate(){
        this.state.tweetRender = this.state.tweetData.data.slice(1,6);
        console.log(this.state.tweetRender);
        
        this.state.listTweet = this.state.tweetRender.map((tweet)=><Tweet 
        linkAvatar={'/image/jennyshen.jpg'}
        name={"Vuongxuan"}
        userName={'@vuggg'}
        tweetText={tweet.content} />);

        console.log(this.state.listTweet);

    }

    render(){
        return(
            <div id="main">
                <h2>Tweet</h2>
                <div id="stream">
                   {this.state.listTweet}
                </div>
            </div>
        );
    }
}

i dont know what i'm doing wrong.

tomrlh · Accepted Answer · 2019-02-23 16:22:59Z

1

Accordingly to React docs, componentDidMount lifecycle most common use is for:

Updating the DOM in response to prop or state changes.

And you want to get and render the tweets, right? Not necessarily listen to updates.

For now a solution is remove your componentDidUpdate() method and change your `render´ method to:

render(){
    var tweetRender = this.state.tweetData.data.slice(1,6);
    return(
        <div id="main">
            <h2>Tweet</h2>
            <div id="stream">
                {listTweet.map((tweet, idx) => 
                    <Tweet
                        key={idx}
                        linkAvatar={'/image/jennyshen.jpg'}
                        name={"Vuongxuan"}
                        userName={'@vuggg'}
                        tweetText={tweet.content} />
                )}
            </div>
        </div>
    );
}

edited Feb 23, 2019 at 16:22

answered Feb 23, 2019 at 16:14

tomrlh

1,0761 gold badge19 silver badges43 bronze badges

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

5 Comments

dinosaur Over a year ago

no, i'm using component did mount to fetch data from database. i'm trying your solution, but it didn't work: i.imgur.com/2OXzKU4.png

tomrlh Over a year ago

where can we chat?

dinosaur Over a year ago

pls contact my via facebook: twitter.com/vuongvuonghehe?lang=vi

tomrlh Over a year ago

Cant find you in facebook, do you have skype?

dinosaur Over a year ago

THANK A LOT, YOU'RE AWESOME.

Tholle · Accepted Answer · 2019-02-23 16:00:09Z

It's generally not a good idea to put React elements (JSX) inside your component state. You could instead just store the data in state, and derive the JSX from that data in the render method.

Example

class TweetContainer extends React.Component {
  state = {
    tweetData: [],
    tweetRender: [],
    listTweet: []
  };

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        tweetData: [
          {
            id: 1,
            name: "foo",
            username: "@foo"
          },
          {
            id: 2,
            name: "bar",
            username: "@bar"
          }
        ]
      });
    }, 1000);
  }

  render() {
    return (
      <div id="main">
        <h2>Tweet</h2>
        <div id="stream">
          {this.state.tweetData.map(obj => (
            <div key={obj.id}>
              {obj.username} - {obj.name}
            </div>
          ))}
        </div>
      </div>
    );
  }
}

ReactDOM.render(<TweetContainer />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Collectives™ on Stack Overflow

How to render multiple component in reactjs, what i'm doing wrong?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related