how do I render an object in reactjs

Question

i am having trouble pulling an object that i have on state and showing it on my web page. it doesn't exactly matter how it appears on the web page i just want to figure out how to view it so far.

import React, { Component } from 'react';
import {Link} from 'react-router-dom';
import axios from 'axios'
const test = require('../controller')

export default class Calandar extends Component {
  constructor(props) {
    super(props)

    this.state = {
      avalable: {},
      unavalable: {}
    }

  }


  componentDidMount() {
    axios.get('/api/avalable').then(res => {
      // console.log(res.data)
      this.setState({avalable: res.data})
    })
  }




  render() {
    return (
      <div>
        Calandar.js
      <div>
        {console.log(this.state.avalable)}
      </div>
      </div>
    );
  }
}

this is the array that i have saved by doing a get request from my database.

0: {…}
avalable: true
date: "1-1-1"
dentist: "dentist_test"
id: 1
name: "dentist_test"
office: "test_office"
time: "01:01:01"

console.log() inside JSX will not work because it returns undefined, you can try {JSON.stringify(this.state.avalable)}, then to render each entry you can use map function. — Mohamed El-Sayed
– Mohamed El-Sayed, Commented Jan 16, 2018 at 20:16

Chris West · Accepted Answer · 2018-01-16 18:35:11Z

1

Unless I'm missing something, drop the console.log in your JSX, should just be:

{this.state.avalable}

But more specifically, if you want the dentist name to appear to show from the object, use:

{this.state.avalable.dentist}

answered Jan 16, 2018 at 18:35

Chris West

553 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Devin Bowen Over a year ago

i have tried this but it doesn't show anything or even send an errow

Chris West Over a year ago

and if you uncomment "// console.log(res.data)", you are indeed getting an Object? I'm not familiar with what the axios Promise is returning.

Devin Bowen · Accepted Answer · 2018-01-16 21:00:53Z

0

i found the answer, i just put it in an array instead of an object here is the full code, thanks

import React, { Component } from 'react';
// import {Link} from 'react-router-dom';
import axios from 'axios'

export default class Calandar extends Component {
  constructor(props) {
    super(props)

    this.state = {
      avalable: [],
      unavalable: []
    }

  }


  componentDidMount() {
    axios.get('/api/avalable').then(res => {
      // console.log(res.data)
      this.setState({avalable: res.data})
    })
  }




  render() {
    console.log(this.state.avalable)
    var availabeList = this.state.avalable.map(available => (<div key={available.id}>
      {available.dentist}
    </div>))
    return (
      <div>
        Calandar.js
      <div>
        
        {availabeList}
      </div>
      </div>
    );
  }
}

answered Jan 16, 2018 at 21:00

Devin Bowen

892 silver badges9 bronze badges

1 Comment

Devin Bowen Over a year ago

i know this wasn't exactly what i was asking but it worked for my scenario

Collectives™ on Stack Overflow

how do I render an object in reactjs

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related