0

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

1 respuesta 1

0

Respuesta en inglés de Darren Baldwin

No puedes cargar un objeto como JSX, tienes que iterarlo y renderizar JSX o convertirlo a un string (texto).

return (
  <div>
    {datos.textos.map(texto => (
      <div className="textContainer">
        <div className="text">{texto.frase}</div>
        <div className="author">{texto.autor}</div>
      </div>
    ))}
  </div>
);

Lo anterior renderizaría cada uno de los textos. Y lo siguiente renderizaría el objecto como string.

return (
  {JSON.stringify(datos)}
)
3
  • 1
    Gracias amigo eres el mejor!, lo probaré mañana a ver si funciona <3 Commented el 8 nov. 2022 a las 2:11
  • En que parte coloco lo de JSON.stringify? en el componente, la app, o en el json? Commented el 8 nov. 2022 a las 16:27
  • @Alejandro Cullen en el .json no puedes, pues es JSON es un objecto de JavaScript, puedes colocarlo donde lo necesites, lo único que hace es convertir un objeto json a texto, en mi respuesta está puesto en el componente.
    – Ouariachi
    Commented el 8 nov. 2022 a las 17:50

Tu Respuesta

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

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