Esta es mi app. En la parte donde está <Frases></Frases>
es donde está colocado el componente con los textos pero en este caso no los muestra.
import './App.css';
import Frases from './Components/Frases'
import Twitter from './twitter-logo-3.png';
import Platon from './pngegg.png'
import Yano from './Ya no hay nadie que.mp3'
function App() {
return (
<div className="App">
<div className='Box'>
<div className='Platon-hover'>
<img className='Platon' src={Platon} alt='platon'></img>
</div>
<div className='Box-child'>
<Frases></Frases> `Aqui se deberian mostrar las frases xd`
<a href='twitter.com/intent/tweet' target='_blank'><img src={Twitter} className='Twitter-logo' alt='Logo de twitter'></img></a>
</div>
</div>
<audio src={Yano} controls></audio>
</div>
);
}
export default App;
Este es mi componente <Frases></Frases>
donde se deberían mostrar los textos, creo que absolutamente todo está bien pero en algo estoy fallando para que no se muestren por pantalla correctamente.
import React, { Component } from 'react'
import datos from './textos.json'
class Frases extends Component {
render () {
return (
<div>
<p>{datos}</p>
</div>
)
}
}
export default Frases
Este es mi objeto con los textos que se deberían mostrar, pero no se muestran al hacer el componente de <Frases></Frases>
, no sé por qué, quiero hacer un botón para irlos mostrando pero pensé que así se mostraría algo.
{
"textos": [
{
"frase": "Ganar lo es todo",
"autor": "Ayanokoji"
},
{
"frase": "El iq solo mide el razonamiento logico de las personas",
"autor": "Alejandro Cullen"
},
{
"frase": "Si crees que algo importa lo haras sin importar que",
"autor": "Elon Musk"
},
{
"frase": "Si puedes imaginarlo, puedes programarlo",
"autor": "Difunto"
}
]
}