CODEWITHSUNDEEP
javascriptreactjsiconsstatematerial-ui
Charlote22
Charlote22

Reputation: 1145

React - Render a certain number of components dynamically

I would like to display a number of the component Star (MUI component) based on the number of points the user has earned (this.state.points).

I don't know how to do this.

import React, { Component } from "react";
import { Star } from "@material-ui/icons";

Points extends Component {
  constructor(props) {
  super(props);
    this.state = {
      points: 6
    };
  }

  render() {
     return (
       <div>
         <p>
           + {this.state.points} points
           <Star />
         </p>
       </div>
     );
    }
  }

export default Points;

Upvotes: 17

Views: 20914

Answers (4)

NearHuscarl
NearHuscarl

Reputation: 81390

The accepted answer uses bad practice, you should pass a key to your component if it's inside a list:

Array(10).fill(0).map((_, i) => <YourComponent key={i} />)
  • Array(10): Create an empty array that can hold 10 values (replace 10 with a dynamic value in your code).
  • .fill(0): Fill it with some dummy value like 0. The array is now populated with 0 10 times.
  • .map((_, i) => (...)): Transform an array of 0 to an array of YourComponent. You can change the name of an unused argument to _ to remove the the no-unused-vars warning from ESLint.

Live Demo

Codesandbox Demo

Upvotes: 9

Shubhanu Sharma
Shubhanu Sharma

Reputation: 2132

This might help:

import React, { Component } from "react";
import { Star } from "@material-ui/icons";

class Points extends Component {
  constructor(props) {
    super(props);
    this.state = {
      points: 6
    };
  }

  getUserStars() {
    let i = 0;
    let stars = [];
    while (i < this.state.points) {
      i++;
      stars.push(<Star />);
    }
    return stars;
  }

  render() {
    return <div>{this.getUserStars(this.state.points)}</div>;
  }
}

export default Points;

You just need to iterate an loop and collect stars in array and call that function in render so whenever state will get updated that function will call and stars will update.

Upvotes: -1

user3210641
user3210641

Reputation: 1631

You can use Array.fill to create new Array with this.state.points number of empty slots which you then fill with the <Star /> component like so:

import React, { Component } from "react";
import { Star } from "@material-ui/icons";

class Points extends Component {
  constructor(props) {
    super(props);
    this.state = {
      points: 6
    };
  }

  render() {
    return (
      <div>
        <p>
          + {this.state.points} points
          // This is where the magic happens
          {Array(this.state.points).fill(<Star />)}
        </p>
      </div>
    );
  }
}

export default Points;

Here is a working Sandbox : https://codesandbox.io/s/vj3xpyn0x0

Upvotes: 34

Kishan Mundha
Kishan Mundha

Reputation: 3141

Try this

import React, { Component } from "react";
import { Star } from "@material-ui/icons";

Points extends Component {
constructor(props) {
super(props);
this.state = {
  points: 6
 };
}

render() {
 return (
   <div>
     <p>
       + {this.state.points} points

       {Array.from(Array(this.state.points)).map((x, index) => <Star key={index} />)}
     </p>
    </div>
  );
  }
}

export default Points;

Upvotes: 17

Related Questions