tengo el siguiente problema.
Este componente "Tarjeta" es un item individual de un contenedor mas grande. La idea es que al apretar el botón detalles, este abra el componente "IdemDetailsContainer". Este recibe un prop "id" y abre los detalles del elemento. Lo que necesito hacer es que al apretar el botón "itemDetailsContainer" se abra en otra pagina o que se no se vea el componente anterior "Tarjetas". Intente hacerlo con Routing pero no lo conseguí.
Con el codigo actual lo que hace es renderizar "itemDetailsContainer" debajo de una tarjeta y en su misma columna.
Este es el tarjetas
import React, {useState} from 'react';
import { Card, Button } from 'react-bootstrap';
import { Switch, Router, Link} from 'react-router-dom'
import ItemDetailsContainer from './ItemDetailsContainer';
const Tarjeta = ({ img, tittle, id, price }) => {
function carritoAnuncio() {
alert("Agregado");
}
const [buttonClicked, setButtonClicked] = useState(false);
const handleButtonClick = () => {
setButtonClicked(true)
}
return (
<div>
<Card>
<Card.Img className="imagen" variant="top" src={img} />
<Card.Body>
<Card.Title>{tittle}</Card.Title>
<Card.Text>${price}</Card.Text>
<Button variant="primary" onClick={carritoAnuncio}>Agregar al Carrito</Button>
<Button
onClick={handleButtonClick}> Detalles
</Button>
</Card.Body>
</Card>
<div>
{buttonClicked ? (<ItemDetailsContainer id={id}></ItemDetailsContainer>): null}
</div>
</div>
)
}
export default Tarjeta;
y este es el ItemDetailsContainer
import React, { useEffect, useState } from 'react';
import {getDataID} from './getItems'
import ItemDetail from './ItemDetail';
function ItemDetailsContainer(id){
const [curso, setCurso] = useState([]);
useEffect(() => {
const data = async () => {
const sata = await getDataID(id);
setCurso(sata)
}
data([])
},[]);
return(
<div>
{
<ItemDetail imagen={curso.image} titulo={curso.tittle} texto={curso.text}></ItemDetail>
}
</div>
)
}