Rendering list of items with ReactJS

Question

I've stumbled upon a trouble with rendering list items inside the component. What am I doing wrong and how to fix it?

This is what I've got in state

this.state = {
      tasksState: false,
      cupsState: false,
      ...
      citizensData: [
        {
          diamsEarned: 5,
          rubiesEarned: 6,
        }, ...
      ]
    }

Throphies are given as props

<Citizens tasksState={this.state.tasksState}
                        cupsState={this.state.cupsState}
                        trophies={this.state.citizensData} />

const Citizens = (props) => {
  let {
        tasksState,
        cupsState,
        trophies
      } = {...props};

  let CitizensList = [];

  for (let i=0; i<20; i++) {
    CitizensList.push(
      <div className="Citizens__container--block">
        <div className="box label-box">
          <label className="label-ct" htmlFor="citiz">Citizen {i+1}:</label>            
        </div>
        ...
        <div className="box diamond-box">
          <i className="fas fa-gem icon icon-diamond"></i>
          <p>{trophies[i].diamsEarned}</p>
        </div>
        <div className="box ruby-box">
          <i className="fas fa-gem icon icon-ruby"></i>
          <p>{trophies[i].rubiesEarned}</p>
        </div>
    );
}

  return (
    <div className="Citizens">
      <div className="Citizens__container">
          <CitizensList />
      </div>
    </div>
  );
}

As a result, list ain't rendered at all

change <CitizensList /> to { CitizensList }

Yousaf
– Yousaf

2020-06-08 15:58:38 +00:00
Commented Jun 8, 2020 at 15:58 — Yousaf
– Yousaf, Commented Jun 8, 2020 at 15:58

nick · Accepted Answer · 2020-06-08 15:59:56Z

1

You can replace this line:

<CitizensList />

with this:

{[...Array(20)].map(i => (
    <div className="Citizens__container--block" key={i}>
        <div className="box label-box">
          <label className="label-ct" htmlFor="citiz">Citizen {i+1}:</label>            
        </div>
        ...
        <div className="box diamond-box">
          <i className="fas fa-gem icon icon-diamond"></i>
          <p>{trophies[i].diamsEarned}</p>
        </div>
        <div className="box ruby-box">
          <i className="fas fa-gem icon icon-ruby"></i>
          <p>{trophies[i].rubiesEarned}</p>
        </div>
    </div>
))}

Though I recommend creating a component for the citizen.

answered Jun 8, 2020 at 15:59

nick

3,3076 gold badges44 silver badges85 bronze badges

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

Comments

ANIK ISLAM SHOJIB · Accepted Answer · 2020-06-08 16:15:55Z

In react it better to use components, more components more flexibility. If I were to do the same task I would create another functional component for your

CitizensList

yet you can follow the below approach,

Here i = number of iteration and also you are missing a closing div.

const Citizens = (props) => {
  let {
        tasksState,
        cupsState,
        trophies
      } = {...props};    
 let i = 20;
  return (
    <div className="Citizens">
      <div className="Citizens__container">
          {

          Array.from(Array(i)).map((j) => 

            <div className="Citizens__container--block">
                <div className="box label-box">
                  <label className="label-ct" htmlFor="citiz">Citizen {j+1}:</label>            
                </div>
                ...
                <div className="box diamond-box">
                  <i className="fas fa-gem icon icon-diamond"></i>
                  <p>{trophies[j].diamsEarned}</p>
                </div>
                <div className="box ruby-box">
                  <i className="fas fa-gem icon icon-ruby"></i>
                  <p>{trophies[j].rubiesEarned}</p>
                </div>
            </div>  
        ))
    }
      </div>
    </div>
  );
}

Collectives™ on Stack Overflow

Rendering list of items with ReactJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related