0

Lo que estoy intentado de hacer es, utilizar un mismo componente, en este caso Header, en la página de inicio y en otras páginas adicionales pero cambiando los datos que se muestran.

La idea de lo que quiero que mi programa compile es esta:

//App.js
import React, {Component} from 'react';
import Nav from './components/Landing/Nav';
import Header from './components/Landing/Header';

import {BrowserRouter as Router, Route, Link} from 'react-router-dom';

export default class App extends Component {
  render() {
    return <div>
      <Router>
        <Nav/>
        <Route exact path="/" render={() => {
          <Header page="index"/>
        }}>
        </Route>
        <Route exact path="/planes" render={() => {
          <Header page="planes"/>
        }}>
        </Route>
      </Router>
    </div>
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Es decir que, cuando a Header le paso el parametro page="index", cargue los datos json que corresponden a "index", cuando le paso page="planes" cargue los datos que corresponden a "planes" y así si cargo datos para otra página.

Hasta el momento tengo mi componente Header de la siguiente forma:

//./components/Landing/Header.js
import React, { Component } from 'react';
import {Container, Button, Typography} from '@material-ui/core';

import dataHeader from '../../bd/header.json';
import headerImg from '../../assets/img/index/header.svg';


export default class Header extends Component {
    state = {
        dataHeader: dataHeader
    }
    render() {
        return (
            <div>
                <Container maxWidth="lg">
                    {this.state.dataHeader.map(e =>
                    <div key={e.index.id}>
                        <img src={headerImg} alt={e.index.image.alt}/>
                        <Typography variant="button" display="block" gutterBottom>
                            {e.index.comment}
                        </Typography>
                        <Typography variant="h3" gutterBottom>
                            {e.index.title}
                        </Typography>
                        <Typography variant="subtitle1" gutterBottom>
                            {e.index.subtitle}
                        </Typography>
                        <Button variant="contained" color="primary">
                            {e.index.button}
                        </Button>
                    </div>
                    )}
                </Container>
            </div>
        )
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Y mis datos en json que corresponden a ese Header:

//bd/header.json
[
    {
        "index": {
            "id": 0,
            "image":{
                "src": "../assets/img/index/header.svg",
                "alt": "header 1"
            },
            "comment": "Comentario 1",
            "title": "Titulo 1",
            "subtitle": "subtitulo 1",
            "button": "boton 1"
        },
        "planes": {
            "id": 1,
            "image":{
                "src": "../assets/img/planes/header.svg",
                "alt": "header 2"
            },
            "comment": "Comentario 2",
            "title": "Titulo 2",
            "subtitle": "subtitulo 2",
            "button": "boton 2"
        }
    }
]

Si en App.js quito el parametro "page="index"", la app funciona sin problemas, aunque únicamente carga los datos de "index", ya que como pueden ver, en Header.js solamente estoy llamando a esos datos.

Lo que intento hacer es que la variable, por ejemplo {e.index.title}, contenga una subvariable que reemplace "index" por "planes" o según la página que estoy viendo. Intenté con algo como {e.{this.props.page}.title} pero al parecer así no funciona.

Perdón por mi ignorancia, estoy aprendiendo a desarrollar con React y espero que me puedan ayudar. Desde ya muchas gracias!

1 respuesta 1

-1

En App.js me falto agregar "return" antes de llamar al componente:

<Route exact path="/" render={() => {
  return <Header page="index"/>
}}>

Y en Header.js la sintaxis correcta para llamar a los datos sería, por ejemplo: {e[this.props.page].title}

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.