React - problem in rendering array of components

Question

function Circle(props) {
  return(<span className='Circle'>this a circle</span>)
}

class Lottery extends React.Component{
  constructor(props){
    super(props);
    this.state = {};
  }

  render(){
    let circles = () => {
      let circlesrow = [];
      for (let i;i < this.props.n;i++) {
        circles.push(<Circle/>)
      }
      return (circlesrow);
    }
    return(
      <div>
        <div>
          {circles()}
        </div>
      </div>
    );
  }
}


function App() {
  return (
    <div className="App">
      <Lottery n={9}/>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

ReactDOM.render(
  <App />,
  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>

i wanted to insert 9 components in Lottery components.but nothing shows up. can someone just explain to me why a relationship like this doesn't work in React? and what is the wrong practice used here?

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. — Community
– Community Bot, Commented Oct 4, 2021 at 9:16

Ori Drori · Accepted Answer · 2021-09-26 13:51:21Z

Init i in the for loop with a 0 - i = 0
push the circles into the row - circlesrow.push(<Circle />)
Call the function - {circles()}

function Circle(props) {
  return(<span className='Circle'>this a circle</span>)
}

class Lottery extends React.Component{
  state = {};

  render(){
    const circles = () => {
      const circlesrow = [];
      
      for (let i = 0; i < this.props.n; i++) {
        circlesrow.push(<Circle />)
      }
      
      return circlesrow;
    }
    
    return(
      <div>
        <div>
          {circles()}
        </div>
      </div>
    );
  }
}

function App() {
  return (
    <div className="App">
      <Lottery n={9}/>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

ReactDOM.render(
  <App />,
  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>

You can also generate the circles' array with Array.from() direcly:

function Circle(props) {
  return(<span className='Circle'>this a circle</span>)
}

class Lottery extends React.Component{
  state = {};

  render(){   
    const { n } = this.props;
    
    return(
      <div>
        <div>
          {Array.from({ length: n }, (_, i) => <Circle key={i} />)}
        </div>
      </div>
    );
  }
}

function App() {
  return (
    <div className="App">
      <Lottery n={9}/>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

ReactDOM.render(
  <App />,
  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>

Davin Tryon · Accepted Answer · 2021-09-26 13:55:52Z

0

you needed to push into the circlesrow array (not the circles function). And, call the circles() function.

render(){
  let circles = () => {
    let circlesrow = [];
    for (let i = 0;i < this.props.n;i++) {
      circlesrow.push(<Circle/>)
    }
    return (circlesrow);
  }
  return(
    <div>
      <div>
        {circles()}
      </div>
    </div>
  );
}

edited Sep 26, 2021 at 13:55

answered Sep 26, 2021 at 13:47

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

3 Comments

theekshanawj Over a year ago

Make sure you pass a key when a map is used for rendering

mamalatishi Over a year ago

i tried your first solution yet after correcting my code nothing shows up

Davin Tryon Over a year ago

edited to add initialization to zero: let i = 0

Collectives™ on Stack Overflow

React - problem in rendering array of components

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related