egoselfaxis
asked on
WordPress REST API with React - passing object data down to a component via props
I've been successfully experimenting with interfacing with WordPress's REST API using React. I've enabled CORS for the remote WordPress site (by modifying it's .htaccess file), and I've succeeded at consuming the JSON data from the API and displaying it by rendering it in my App.js file.
The code for my App.js file is as follows:
Assuming that the "accountsURL" is configured with a valid, exposed WordPress Rest API endpoint URL, ... this results in 10 post titles being displayed on the page. Note, however, that I would prefer to be able to pass the "accounts" object to my "<Accounts />" component via props (using the spread operator), .. as I only want the data to be displayed on the "/accounts" page in my application. So what would be the correct way for me to pass the object data down to my <Accounts /> component via props?
The minimal code that's currently contained within my Accounts.js file is below:
Thanks,
- Yvan
The code for my App.js file is as follows:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import {
BrowserRouter,
Switch,
Route
} from 'react-router-dom';
import Home from './components/Home';
import Accounts from './components/Accounts';
class App extends Component {
constructor() {
super();
this.state = {
accounts: []
}
}
componentDidMount() {
let accountsURL = 'https://mywordpresssite.com/wp-json/wp/v2/posts';
fetch(accountsURL)
.then(response => response.json())
.then(response => {
this.setState({
accounts: response
})
})
}
render() {
let accounts = this.state.accounts.map((account, index) => {
return (
<div key={index}>
<p>{account.title.rendered}</p>
<hr/>
</div>
)
});
return (
<div className="App">
<header className="App-header">
<br />
<img src={logo} className="App-logo" alt="logo" />
</header>
<br />
{accounts}
<div className="row">
<BrowserRouter>
<Switch>
<Route path="/" exact component={() => <Home />} />
<Route path="/accounts" exact component={() => <Accounts {...accounts} />} />
</Switch>
</BrowserRouter>
</div>
</div>
);
}
}
export default App;
Assuming that the "accountsURL" is configured with a valid, exposed WordPress Rest API endpoint URL, ... this results in 10 post titles being displayed on the page. Note, however, that I would prefer to be able to pass the "accounts" object to my "<Accounts />" component via props (using the spread operator), .. as I only want the data to be displayed on the "/accounts" page in my application. So what would be the correct way for me to pass the object data down to my <Accounts /> component via props?
The minimal code that's currently contained within my Accounts.js file is below:
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class Accounts extends Component {
componentDidMount() {
document.title = 'Manage Accounts';
}
render() {
return (
<div>
<Link to="/">Return to Home</Link>
<h1>Manage Accounts</h1>
</div>
)
}
}
export default Accounts;
Thanks,
- Yvan
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.