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!