Click on a card and then navigate to card page with details ,in react

I am new to React and I am trying to make a simple application...I fetch some data from backend( a list with announces) and I make a list with them. So, I want that when I push to a button from that announce I want to go to another component where I can see details about that announce. I put my code:

    class App extends React.Component {        constructor(props) {          super(props);            this.state = {              carData: null,              checkData: false          }      }        getData = () => {          fetch('http://localhost:8000/api/all-articles')          .then( (response) => response.json() )          .then( (response) => {this.setState({              carData : response,              checkData : true          })});      }        componentDidMount = () => {          this.getData();      }        displayCars = () => {          return(              this.state.carData.data.map( (object, index) => (                  <CarCard key={index} name = {object.title} description={object.description} img={object.image} id={object.id}/>              ) )          );      }        render() {          if(this.state.checkData){              return(                  <div className="App">                      <Title/>                      <div className="cars">                      {this.displayCars()}                      </div>                  </div>              );          }else {              return(                  <div>Loading..</div>              );          }      }  }    export default App;          class CarCard extends React.Component {          render() {          console.log(this.goToCardInfo(this.props.id));          return(              <div className="card">                  <Card>                      <Card.Img variant="top" src={`http://localhost:8000/images/${this.props.img}`}/>                      <Card.Body>                          <Card.Title>{this.props.name}</Card.Title>                          <Card.Text>                          {this.props.description}                          </Card.Text>                          <Button variant="primary">See announce</Button>                      </Card.Body>                  </Card>              </div>          );      }  }    export default CarCard;          class InfoCard extends React.Component {            render() {          return(              <h2>hello</h2>          );      }  }    export default InfoCard;  

I want to say that from backend I fetch id, title,description, price..I googled it but I didn't understand how can I make it..Thank you

https://stackoverflow.com/questions/66481432/click-on-a-card-and-then-navigate-to-card-page-with-details-in-react March 05, 2021 at 03:03AM