Attempting to place data from an API onto a modal in React-CodePudding

I'm attempting to put data that I'm getting from an API onto a modal that will appear whenever a button is clicked.

How is this done? I'm able to use the data from the API without the modal, so I know it's not an issue with the syntax of my componentDidMount(). Not sure what the issue is and how it can be resolved.

import React from 'react';
import './App.css';
import Nav from './Nav';
import Meal from './Meal';
import meals from './Meals';
import Modal1 from './Modal'


function App() {
  const mealArr = meals.map(item => <Meal food={item.food} picture={item.picture} type={item.id}  />)

  return (
      <div className="content">
        <Nav />
        {mealArr}
        <Modal1 isOpen={false}/>
      </div>
  );
}

export default App;

import React from 'react';
import Modal from 'react-modal';

class Modal1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      isLoaded: false
    }
  }

  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/users')
    .then(res => res.json())
    .then(json => {
      this.setState({
        isLoaded: true,
        items: json
      })
    })
  }

  render() {

    const allItems = this.state.items;

    let itemArr = allItems.map(item => 
    
    <div>
      <ul>
        <li key={item.id}>{item.name}</li>
      </ul>
    </div>)

      return (
        <div>
          <Modal>
            {itemArr}
          </Modal>
        </div>
      )
    }
  }

export default Modal1;

import React, {Component} from 'react';
import Modal1 from 'react-modal';

class Meal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false
    }
    this.handleClick = this.handleClick.bind(this);
    this.turnOff = this.turnOff.bind(this);
  }
  

  handleClick() {
    this.setState({isOpen: true})
  }

  turnOff() {
    this.setState({isOpen: false})
  }

  render() {
    return (
      <div className="meal-container">
        <h2>{this.props.type}</h2>
        <h1>{this.props.food}</h1>
        <img alt="" src={this.props.picture} />
        <p className="steps-button" onClick={this.handleClick}>Steps</p>
        <Modal1 className="modal-1" isOpen={this.state.isOpen}/>
      </div>
    )
  }
}

export default Meal;

CodePudding user response：

take a look at allItems, it's an empty array before you get the data from the API.

So, for the first render (before component did mount):

const allItems = this.state.items  // ----> const allItems = []

mapping through an empty array will not produce any error and return another empty array, but when you map through an empty array, don't expect to have any item or item.name. so the itemArr is not as your expectation and cause the issue with rendering it.

to avoid from this issue, check your allItems to ensure that the data has arrived.

const allItems = this.state.items;
let itemArr = []

if (allItems.length > 0) {
    itemArr = allItems.map(item => (
      <div>
        <ul>
          <li key={item.id}>{item.name}</li>
        </ul>
      </div>
    )
}

return (
        <div>
          <Modal>
            {itemArr}
          </Modal>
        </div>
      )