New to React and I cannot get the info that I want to come into the modal-CodePudding

This is my first React project that I am trying to complete and I would like for the modal to open and have the artist's name and bio show up in that modal. I have got it to the point that the modal will open and close but I cannot figure out how to get the info from my artist's request to come into the modal so I can access the information from my app.js which I am using for my index page.

This is my App.js:

import React from "react";
import Container from "react-bootstrap/Container";
// import Nav from "react-bootstrap/Nav";
import Navbar from "react-bootstrap/Navbar";
// import NavDropdown from "react-bootstrap/NavDropdown";
import Row from "react-bootstrap/Row";
import Card from "react-bootstrap/Card";
import Col from "react-bootstrap/Col";
import Button from "react-bootstrap/Button";
import Modal from "./modal";
import axios from "axios";

export default class Artist extends React.Component {
  state = {
    artists: [],
    modal: false,
  };
  selectModal = (info) => {
    this.setState({ modal: !this.state.modal }); // true/false toggle
  };
  componentDidMount() {
    axios.get("http://localhost:3000/artists").then((res) => {
      const artists = res.data;
      this.setState({ artists });
    });
  }
  render() {
    return (
      <>
        <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
          <Container>
            <Navbar.Brand href="#home">Horrorcore Bible</Navbar.Brand>
            <Navbar.Toggle aria-controls="responsive-navbar-nav" />
            <Navbar.Collapse id="responsive-navbar-nav">
              {/* <Nav className="me-auto">
                <Nav.Link href="#features">Features</Nav.Link>
                <Nav.Link href="#pricing">Pricing</Nav.Link>
                <NavDropdown title="Dropdown" id="collasible-nav-dropdown">
                  <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                  <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                  <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                  <NavDropdown.Divider />
                  <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
                </NavDropdown>
              </Nav>
              <Nav>
                <Nav.Link href="#deets">More deets</Nav.Link>
                <Nav.Link eventKey={2} href="#memes">
                  Dank memes
                </Nav.Link>
              </Nav> */}
            </Navbar.Collapse>
          </Container>
        </Navbar>

        <div style={{ backgroundColor: "#BA1313" }}>
          <Row xs={1} md={3} className="g-4">
            {this.state.artists
              .sort((a, b) => a.name.localeCompare(b.name))
              .map((artist) => (
                <Col>
                  <Card className="text-center" border="dark" style={{ width: "27.95rem", backgroundColor: "black" }}>
                    <Card.Img
                      variant="top"
                      src={artist.image}
                      alt="artist"
                      className="image"
                      style={{ height: 400, width: 445 }}
                    />
                    <Card.Body>
                      <Card.Title style={{ textAlign: "center", color: "white" }}>{artist.name}</Card.Title>

                      <Modal displayModal={this.state.modal} closeModal={this.handleClose} More Info />
                    </Card.Body>
                  </Card>
                </Col>
              ))}
          </Row>
        </div>
      </>
    );
  }
}

// export default Artist;

This is the modal

import React, { useState } from "react";
import Button from "react-bootstrap/Button";
import Modal from "react-bootstrap/Modal";
import { Artists } from "./App.js";

class Example extends React.Component {
  function Artist() {
  render() {
    const artists = this.props.artists;
    const [show, setShow] = useState(false);
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    return (
      <>
        <Button variant="danger" onClick={handleShow}>
          More Info
        </Button>

        <Modal show={show} onHide={handleClose}>
          <Modal.Header closeButton>
            <Modal.Title>{this.artists.name}</Modal.Title>
          </Modal.Header>
          <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={handleClose}>
              Close
            </Button>
            {/* <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button> */}
          </Modal.Footer>
        </Modal>
      </>
    );
  }
}
}

export default Example;

I have looked into redux and I have looked into functional components and I do not understand how to get it across to the modal. Any links or tutorials that break it down step by step would be greatly appreciated to help get me on track.

CodePudding user response：

You don't appear to be parsing the artist data into your <Modal> component via props

<Modal displayModal={this.state.modal} closeModal={this.handleClose} More Info />

should be

<Modal artists={artist} displayModal={this.state.modal} closeModal={this.handleClose} More Info />

and now you will be able to access the artist data via this.props.artists within the <Modal/> component.

Just to add, I think the naming convention of your <Artist> component could be confusing. I'd be more inclined to call it something along the lines of <ArtistList> as the singular component fetches data from an API about multiple different artists. Hope this helps.