No se muestran mis frases del JSON en react, la idea es hacer un botón que cada vez que haga click cambie de frase con el autor, pero no se muestran
Este es mi componente Text, en la parte del <li><p>{textos.frase}</p></li>
y <li><p>{textos.autor}</p></li>
, es donde debería poner la frase y el autor aleatorio, pero por alguna razón no los muestra.
import React, { useState } from "react";
import textos from './textos.json'
textos = JSON.stringify(textos)
const getRandom = () => Math.floor(Math.random() * textos.length)
const Text = () => {
const [texto, setTexto] = useState(textos[getRandom()])
const changeText = () => {
const random = getRandom()
setTexto(textos[random])
}
const colors = [
'#16a085',
'#27ae60',
'#2c3e50',
'#f39c12',
'#e74c3c',
'#9b59b6',
'#FB6964',
'#342224',
'#472E32',
'#BDBB99',
'#77B1A9',
'#73A857'
];
const color = colors[Math.floor(Math.random() * colors.length)]
document.body.style = `background: ${color}`;
return (
<div className="Text-container" style={{color: color}}>
<h3>Quotes</h3>
<ul>
<li><p>{textos.frase}</p></li> `<-- AQUI ESTA EL PROBLEMA`
<li><p>{textos.autor}</p></li> `<-- HERE IS THE PROBLEM XD`
</ul>
<button onClick={changeText}>Next</button>
<button onClick={() => window.location.reload()}>Refresh</button>
</div>
)
}
export default Text;
Este es mi archivo JSON el cual tiene las frases pero no las muestra en mi componente Text, la idea era hacer un botón que cada vez que haga click, cambie la frase con el autor correspondiente!
{
"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"
}
]
}
texto
del useState donde la usas?