I'm trying to use React with React-router v4 to render a few elements.
The idea is that the component is a list of articles from a website, with each Route using a different API key to get articles from a different site.
I'm using a single component to display the articles, and with each Route I want to pass a different API key.
The issue I have is that each route is using the same API key, which is the key of the first Route visited.
The source code is below:
var APIKeys = {
BBCKey: 'https://newsapi.org/v1/articles?source=bbc-sport&sortBy=top&apiKey=foo',
ESPNKey: 'https://newsapi.org/v1/articles?source=espn&sortBy=top&apiKey=foo',
FourFourTwoKey: 'https://newsapi.org/v1/articles?source=four-four-two&sortBy=top&apiKey=foo'
}
let App = () => (
<BrowserRouter>
<div className="container">
<header>
<span className="icn-logo"><i className="material-icons">code</i></span>
<ul className="main-nav">
<li><NavLink exact to="/">Home</NavLink></li>
<li><NavLink to="/BBCSport">BBC Sport</NavLink></li>
<li><NavLink to="/FourFourTwo">FourFourTwo</NavLink></li>
<li><NavLink to="/ESPN">ESPN</NavLink></li>
</ul>
</header>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/BBCSport" render={ () => <GetArticles APIKey={APIKeys.BBCKey} /> } />
<Route path="/FourFourTwo" render={ () => <GetArticles APIKey={APIKeys.FourFourTwoKey} /> } />
<Route path="/ESPN" render={ () => <GetArticles APIKey={APIKeys.ESPNKey} /> } />
<Route component={NotFound} />
</Switch>
</div>
</BrowserRouter>
);
export default App;<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>import React, { Component } from 'react';
import axios from 'axios';
import ArticleList from './ArticleList';
export default class GetArticles extends Component {
constructor(props) {
super(props);
this.state = {
articleTitles: [],
loading: true
};
}
componentDidMount() {
axios.get(this.props.APIKey)
.then(response => {
let titles = response.data.articles.map( (currentObj) => {
return currentObj.title;
} );
this.setState({
articleTitles: titles,
loading: false
});
})
.catch(error => {
console.log('Error fetching and parsing data', error);
});
}
render() {
return (
<div>
<div className="main-content">
<h1 className="main-title">Articles</h1>
{ (this.state.loading) ? <p>Loading</p> : <ArticleList list={this.state.articleTitles} /> }
</div>
</div>
);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>My two questions are, is this a good idea using a single component like this, even if it is rendering different information, or should I have a component that renders each different list of articles?
How can I fix it so the appropriate API key is used?