Hola como va? Este es mi primer post. Les cuento el problema. Estoy aprendiendo react y empece a hacer una pagina. He generado componentes (< Button > en este caso) que me han funcionado bien, pero ahora he querido pasarle informacion a traves de un JSON a ese componente para que no este hardcodeada y me arroja el siguiente error:
Error: Cannot find module '"../images/HomeFooter-Explorar.svg"'
el tema es que cuando utilizo los componentes en forma directa sin el json, no me arroja el error
<Button text="Explorar" path={require("../images/HomeFooter-Explorar.svg")} link="tuBusqueda"></Button>
pero cuando tomo la informacion del json:
<div>
{data.HomeButtons.map(aButton =>
<Button text={(aButton.text)} path={require(aButton.path)} />)}
</div>
me arroja el error mencionado y no entiendo que estoy haciendo mal
Simplifico los archivos para que se entienda mejor.
La estructura de directorios es la siguiente:
-Proyecto
--node_modules
--public
--src
---components
---css
---Data
---images
---pages
el archivo LocalData.json seria:
{
"HomeButtons": [
{
"text" : "Explorar",
"path" : "\"../images/HomeFooter-Explorar.svg\"",
"link" : "tuBusqueda"
}
]
}
el archivo app.js:
import React from 'react';
import {BrowserRouter, Route, Switch, Link} from 'react-router-dom'
import Home from "../pages/Home";
function App() {
return (
<BrowserRouter>
<Switch>
<Route path="/home" component={Home}/>
</Switch>
</BrowserRouter>
)
}
export default App
el archivo de la home.js:
import React from 'react';
import data from '../Data/LocalData'
import Button from "../components/Button";
class Home extends React.Component {
render() {
return (<div>
{data.HomeButtons.map(aButton => <Button text={(aButton.text)} path={require(aButton.path)} />)}
</div>
export default Home
y el componente Button.js:
import React from "react";
import "../css/Button.css"
import { Link } from "react-router-dom"
class Button extends React.Component {
render() {
return <div className={"Button"}>
<Link to={this.props.link}>
<img src={this.props.path}/>
</Link>
</div>
}
}
export default Button
Bueno desde ya estoy muy agradecido por cualquier ayuda que puedan darme. Saludos.