1

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"
        }
    ]
}
9
  • La variable texto del useState donde la usas?
    – JoseMgz_Ux
    el 11 nov. 2022 a las 19:27
  • Dime si esto es lo que buscas? enlace
    – JoseMgz_Ux
    el 11 nov. 2022 a las 19:33
  • Es lo que busco si, pero desde un archivo JSON, y que se muestren aleatoriamente por pantalla, tipo asi: youtube.com/… el 11 nov. 2022 a las 20:07
  • Ya recien la cambie para usarla en el <li><p>{texto.frase}</p></li>, pero nada, no se muestra la frase:(... el 11 nov. 2022 a las 20:09
  • Mira mi respuesta a ver si te funciona
    – JoseMgz_Ux
    el 11 nov. 2022 a las 20:11

1 respuesta 1

1

Hice algunos cambios en el archivo json ya que a como estaba hecho se me dificultaba acceder a la información.

import React, { useState } from "react";
import frases from "./textos.json";

const getRandom = () => Math.floor(Math.random() * frases.length);

export function App() {
  const [texto, setTexto] = useState(frases[getRandom()]);
  console.log(texto);//variable texto contiene el objeto random

  const changeText = () => {
    const random = getRandom();
    setTexto(frases[random]);//pasas el objeto random a texto con el setTexto()
  };

  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: "white" }}>
         {/* antes: style={{ color: color }} */}

          <h3>Quotes</h3>
             {/* 
                Usas texto que contiene el objeto y ingresas a los respectivos valores 
                Ejm de objeto que recibe:
                 {
                   frase: "El iq solo mide el razonamiento logico de las personas"
                   autor: "Alejandro Cullen"
                 }
             */}
             <ul>
               <li><p>{texto.frase}</p></li>
               <li><p>{texto.autor}</p></li> 
             </ul>

      <button onClick={changeText}>Next</button>
      <button onClick={() => window.location.reload()}>Refresh</button>
    </div>
  );
}

En el Hook const [texto, setTexto] = useState(frases[getRandom()]); por lo que vi nunca usabas texto en ninguna parte y allí era donde se guardaba la data en cambio estabas imprimiendo textos con S

El color del texto style={{ color: "white" }} en const color = colors[Math.floor(Math.random() * colors.length)]; buscabas un color random pero estabas pasándole el mismo color tanto al background como al texto y por eso tampoco se veía ya que eran del mismo color.

textos.json

[
  {
    "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"
  }
]

ANEXOS:

introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí

2
  • Muchas gracias amigo!, QUE CRACK <3 el 11 nov. 2022 a las 20:23
  • De nada, ya que le diste a respuesta correcta también dale a respuesta útil, la flechita hacia arriba.
    – JoseMgz_Ux
    el 11 nov. 2022 a las 20:32

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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