1

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>
)
}
2
  • Estas usando un router? Commented el 9 jul. 2021 a las 20:40
  • 1
    mira justamente, encontré la solución. Resulta que hay que usar el "useParams()" desde itemDetailsCointainer y en tarjeta enviarle el path con el id.
    – Com_Com
    Commented el 11 jul. 2021 a las 0:48

1 respuesta 1

2

Ya lo solucione! Dejo la respuesta para cualquiera que lo necesite

Tenemos que usar "useParams" del packete router-dom. Lo importamos dentro del componente al que queremos ir o enviar datos también

import React, { useEffect, useState } from 'react';
import {getDataID} from './getItems'
import ItemDetail from './ItemDetail';
import {useParams} from 'react-router-dom';

function ItemDetailsContainer(){

  const [curso, setCurso] = useState([]);
    
    const id = useParams()

     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>
)
}

export default ItemDetailsContainer;

y en el componente del que salimos tenemos que hacer esto

import React from 'react';
import { Card, Button } from 'react-bootstrap';
import {Link} from "react-router-dom";

const Tarjeta = ({ img, tittle, id, price }) => {

    function carritoAnuncio() {
        alert("Agregado");
    }
 
    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>
                    <Link to={`/itemDetailsContainer/${id}`}><Button variant="secondary" >Detalle</Button>
                </Link></Card.Body>
            </Card>
        </div> 
    )
}

export default Tarjeta;

Por ultimo en el app.js debemos tambien importar router-dom y agregar nuestro componente.

import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.css';
import Navegacion from './components/Navegacion';
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from "react-router-dom";

import { Container, Row } from 'react-bootstrap';
import ItemDetailsContainer from './components/ItemDetailsContainer';


function App() {

  return (
  <Router><Navegacion/>
      <div className="App">
        
        <Container>
          <Row>
                    <Switch>
                            <Route path="/itemDetailsContainer/:id">
                                <ItemDetailsContainer/>
                            </Route>
                        </Switch>
                  </Row>
        </Container>
      </div>
    </Router>
  );
}

export default App;

Que hace? el useParams() usa lo que este después del ":", en el url, como parámetro y lo envía al componente. Entonces podemos asignárselo a una constante que luego usarlo.

Nosotros en Tarjeta ponemos el "link", tambien de router dom y le decimos que vaya a la direccion que necesitamos y colocamos despues del ":" la id o lo que necesitemos

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.