0

tengo un error al pasar propiedades de padre a hijo en React y no encuentro la solución. El problema que tengo es que el componente hijo si recibe las propiedades, pero no me las pasa por el condicional. Son 4 componentes que se entrelazan entre si. Los dos primeros envían una propiedad a un tercero y este le envía las propiedades a un cuarto, que según la condición envía un texto u otro. Gracias por vuestra ayuda.
Primer y segundo componente:

function App() {
  return (
    <div className="App">
      <Header/>
      <div className="panel">
          <Tarjetas/>
          <Tarjetas/>
          <Tarjetas/>
          <div>
          <AñadirTarjetaOTarea type='tarjeta'/>
          </div>
      </div>
    </div>
  );
}

Estos dos componentes envían type como propiedad

const Tarjetas = () => {
  return (
    <div className= "tarjetascss">
        <TarjetaTitulo/>
        <Tareas/>
        <Tareas/>
        <Tareas/>
        <AñadirTarjetaOTarea type= 'tarea'/>
    </div>
  )
}

Este componente recibe la propiedad y la envía al componente PonerTexto

const AñadirTarjetaOTarea = (type) => {
  const [open] = useState(false);
  return (
    <div className='sumar'>
      <Collapse in={open}>
        <AbrirTexto/>
      </Collapse>
      <Collapse in={!open}> 
        <PonerTexto type={type}/>  
      </Collapse>
    </div>
  )
}

Y aquí llega el valor de la propiedad, pero el condicional no me funciona. Soy bastante novato en React y no se donde esta el fallo. No he puesto las importaciones pero todos los archivos están bien relacionados.

const PonerTexto = (props) => {
  const data = props.type;
  return (
    <div className='poner_textocss'>
      <p>
        {
        data === 'tarjeta' ? 
          ' + Añada otra tarjeta' :
          ' + Añada otra tarea'
        }            
      </p>
    </div>
  )
}

Comunicarme si hay alguna duda o si se necesita visualizar otra parte del código. Gracias

1 respuesta 1

1

El error está en el componente AñadirTarjetaOTarea. No se pone así como se reciben las props. Sería así

const AñadirTarjetaOTarea = (props) => {
  const {type} = props;
  const [open] = useState(false);
  return (
    <div className='sumar'>
      <Collapse in={open}>
      <AbrirTexto/>
      </Collapse>
      <Collapse in={!open}> 
        <PonerTexto type={type}/>  
      </Collapse>
    </div>
  )
}

o

const AñadirTarjetaOTarea = ({type}) => {
  const [open] = useState(false);
  return (
    <div className='sumar'>
      <Collapse in={open}>
      <AbrirTexto/>
      </Collapse>
      <Collapse in={!open}> 
        <PonerTexto type={type}/>  
      </Collapse>
    </div>
  )
}

Puedes hacerlo así o donde llamas a PonerTexto en lugar de type poner props.type

1
  • Me funciono la primera propuesta, la segunda no me funciono. Gracias
    – jbort
    el 17 jun. 2022 a las 11:50

Tu Respuesta

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

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