CODEWITHSUNDEEP
jsonreactjsredux
fransBernhard
fransBernhard

Reputation: 362

Can't access JSON object information React/Redux

Feels like I'm missing something obvious here - but I can't figure out how to access my JSON data. I have a Container component: 

class About extends Component {
  componentDidMount(){
    const APP_URL = 'http://localhost/wordpress/'
    const PAGES_URL = `${APP_URL}/wp-json/wp/v2/pages`

    this.props.fetchAllPages(PAGES_URL, 'about')
  }

  render(){
    return (
      <div>
        <Header/>
        <div className="bg">
          <div className="home-wrapper">
            <h1>AAAAABBBBBOOOOUUUUUT</h1>
            <Counter/>
            <AboutInfo />
          </div>
        </div>
        <Footer/>
      </div>
    )
  }
}

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({ fetchAllPages }, dispatch)
}

export default connect(null, mapDispatchToProps)(About);

And a Smart component:

class AboutInfo extends Component {
  render(){
    console.log(this.props.page);
    console.log(this.props.page.id);
    return (
      <div>
        <h1>This is ID: {this.props.page.id}</h1>
      </div>
    )
  }
}

const mapStateToProps = ({ page }) => {
  return { page }
}

export default connect(mapStateToProps)(AboutInfo);

My action:

export const fetchAllPages = (URL, SLUG) => {
  var URLEN;

  if(!SLUG){
    URLEN = URL
  } else {
    URLEN = URL + "?slug=" + SLUG
  }

  return (dispatch) => {
    dispatch(fetchRequest());
    return fetchPosts(URLEN).then(([response, json]) => {
      if(response.status === 200){
        if(!SLUG) {
          dispatch(fetchPagesSuccess(json))
        } else {
          dispatch(fetchPageBySlugSuccess(json))
        }
      } else {
        dispatch(fetchError())
      }
    })
  }
}

const fetchPageBySlugSuccess = (payload) => {
  return {
    type: types.FETCH_PAGE_BY_SLUG,
    payload
  }
}

My reducer:

const page = (state = {}, action) => {
  switch (action.type) {
    case FETCH_PAGE_BY_SLUG:
      console.log(action.paylod)
      return action.payload
    default:
      return state
  }
}

This gives me:

enter image description here

When I console.log(this.props.page) in my AboutInfo component, it prints the object, but when I print console.log(this.props.page.id) it gives me undefined. Why can't I print the JSON content? Thanks!

Upvotes: 2

Views: 1470

Answers (3)

Dkhili amine
Dkhili amine

Reputation: 169

Getting data from the store is async So you must adding loading varibale on your reducer

class AboutInfo extends Component {
 render(){
  if(this.props.loading) return (<div>loading</div>);
  return (
   <div>
    <h1>This is ID: {this.props.page.id}</h1>
   </div>
  );
 }
}

const mapStateToProps = ({ page, loading }) => {
 return { page, loading }
}

on your action try returing

json.page[0]

Upvotes: 1

Shubham Khatri
Shubham Khatri

Reputation: 281864

page is an array and hence this.props.page.id is undefined. You might want to access the first element in array in which case you would do

this.props.page[0].id

but you might also need to add a test, since before the response is available you will be trying to access page[0].id and it might break.

You could instead write

this.props.page && this.props.page[0] && this.props.page[0].id

Upvotes: 2

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196187

That is because page is an array and the id is a property of its 1st element.

So use this.props.page[0].id

If the logged object in your screenshot is the this.props.page then you will need and additional .page as that is also a part of the object this.props.page.page[0].id

Upvotes: 0

Related Questions