Let's say I have a React.js component called CountryFlag. I also have a directory of SVG images for each country's flag at countries/
This component takes a single prop - countryCode. This would be something such as ES for Spain.
How can I use the ES6 import construct with this.props.countryCode when this.props is not in scope?
I have tried to do this in componentDidMount() but get a syntax error:
Syntax error: 'import' and 'export' may only appear at the top level (6:2)
You should use require. like:
class Whatever extends Component{
constructor(props) {
super(props);
this.countryImage = null;
}
componentDidMount() {
const { countryCode } = this.props;
this.countryImage = require(`./countries/${countryCode}.svg`);
}
render() {
return (
<img src={this.countryImage} alt="Whatever" />
);
}
}
You can make use of System.import to import a component dynamically in componentDidMount
constructor(props) {
super(props)
this.state = { component: null }
}
componentDidMount() {
this.loadComponent(component => this.setState({ component }));
}
loadComponent = callback => {
let component = null;
// This needs to be relative to the current module otherwise Webpack won't know where to look
System.import(`./countries/${this.props.countryCode}`).then(module => callback(component = module))
return component;
}
import() (the function)You can also use your props on src to your image.
Something like
<img src={"./img/" + this.props.country + ".svg"}>
<Isvg src={this.props.svgImage}/>