CODEWITHSUNDEEP
reactjs
dinosaur
dinosaur

Reputation: 199

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

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.

enter image description here

Upvotes: 0

Views: 49

Answers (2)

tomrlh
tomrlh

Reputation: 1066

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>
    );
}

Upvotes: 1

Tholle
Tholle

Reputation: 112777

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>

Upvotes: 1

Related Questions