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