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;