How do I create an array of objects in a React class component through a for loop to be mapped in a functional component?

Question

I created the following class component with React:

I want the daysArrayState object to hold an array of objects that is create through the addDay arrow function.

 state = {
    daysArray: []
}

days = () => {
    let daysArrayCopy = [];
    for(let i=1; i >= 35; i++){
        let id = Math.random();
        let num = i;
        let day = {
            dayId: id,
            dayNum: num
        }
        daysArrayCopy = [...this.state.daysArrayState, day];
        this.setState({daysArray: daysArrayCopy});
    }
}


render(){

    this.days();

    return(
        <div className="grid calendar-template">
            <div className="grid">Left</div>
            <div>
                <div className="grid text-center month-title">
                    January
                </div>
                <div>
                    <DayBox days = {this.state.daysArray}></DayBox>
                </div>
            </div>
            <div className="grid">Right</div>
        </div>
    )
}

I have another functional component that is meant to map through the daysArrayState object:

const DayBox = ({days}) => {

const daysList = days.map(day => { 
    return(
        <div className="grid dayBox-template text-center" key={day.dayId}>
            {day.dayNum}
        </div>
    )
})

return(
    <div className="grid week-grid">
        {daysList}
    </div>
)    

When I try to do this I get an error as the parameter I appear to be passing is the addDay function and not the array of objects in daysArrayState.

Answer 1

Here is your main component:

class App extends Component {
  state = {
    days: []
  };
  //call the function in this lifecycle method
  componentDidMount() {
    this.addDay();
  }
  //see the updated logic for your addDay
  addDay = () => {
    const daysArrayCopy = [];
    for (let i = 0; i <= 35; i++) {
      let id = Math.random();
      let num = i;
      let day = {
        dayId: id,
        dayNum: num
      };
      daysArrayCopy.push(day);
    }
    this.setState({ days: [...this.state.days, ...daysArrayCopy] });
  };

  render() {
    return (
      <div className="grid calendar-template">
        <div className="grid">Left</div>
        <div>
          <div className="grid text-center month-title">January</div>
          <div>
            <DayBox days={this.state.days} /> //pass the state here
          </div>
        </div>
        <div className="grid">Right</div>
      </div>
    );
  }
}

Here is your DayBox component:

export default function DayBox({ days }) {
  return (
    <div className="grid week-grid">
      {days.map(day => (
        <div key={day.dayId}>{day.dayNum}</div>
      ))}
    </div>
  );
}

Here is a live demo: https://stackblitz.com/edit/react-zvzfwu?file=index.js