Link to home
Start Free TrialLog in
Avatar of egoselfaxis
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:

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;

Open in new window


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;

Open in new window


 Thanks,
- Yvan
ASKER CERTIFIED SOLUTION
Avatar of egoselfaxis
egoselfaxis

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial