Rendering json data with axios.get

Question

I am new to react.js and I am trying to fetch server side data in JSON format in a table. So what I did is:

export default class TableUser extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    table: [],
  }
}
componentDidMount(){
  axios.get('http://www.reddit.com/r/reactjs.json')
    .then((response)=>{
      const table = response.data.map(obj => obj.data);
        this.setState({ table });
      })
    .catch((err)=>{

    })
}

And I am rendering this in a <div> like:

render(){
    <div><p>{this.state.table.kind}</p></div>
}

why I am not getting the value for kind? Please suggest!!

Answer 1

obj.data(in data there is property children which is Array) is Object not Array, I think in this case better change default state, and create one field for kind (String) and one for data (Array), like so

class TableUser extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      kind: '',
      data: []
    };
  }
  
  componentDidMount(){
    axios
      .get('https://www.reddit.com/r/reactjs.json')
      .then(({ data })=> {
      	this.setState({ 
          kind: data.kind, 
          data: data.data.children
        });
      })
      .catch((err)=> {})
  }
      
  render() {
    const child = this.state.data.map((el, index) => {
      return <div key={index}>
        <p>Title - { el.data.title }</p>
        <p>Author - { el.data.author }</p>
      </div>
    });

    return <div>
      <p>{ this.state.kind }</p>
      <div>{ child }</div>
    </div>;
  }
}

ReactDOM.render(
  <TableUser />,
  document.getElementById('container')
);

<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.js"></script>
<div id="container"></div>

Answer 2

data.json

{ "email":"[email protected]", "password":"1234" }

get_data.js

import React, { Component } from 'react';
import './css.css'
import Logout from './logout';
import axios from 'axios';
import { Redirect } from 'react-router-dom';

class Login extends Component {
constructor(props){
    super();
    this.state=({
        valid:false,
        email1:'',
        pass1:'',
        msg:'valid'
    })
    this.check = this.check.bind(this);
}
check()
{
    axios.get('http://127.0.0.1:8887/src/component/data.json')
        .then((response) => {
            this.setState({
                email1:response.data.email,
                pass1:response.data.password
            })
        })
  .catch((err)=> {})
    if(this.email.value === this.state.email1 && this.password.value === this.state.pass1)
    {
        this.setState({
            valid:true
        })
    }
    else{
        this.setState({
            msg:"invalid number"
        })
    }
}
render() {
    return (
        <div className="card-m">
            <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input ref={(email1 => (this.email=email1))} type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">Password</label>
                <input ref={(pass => (this.password=pass))} type="password" class="form-control" id="exampleInputPassword1" />
            </div>
            <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="exampleCheck1" />
                <label class="form-check-label" for="exampleCheck1">Check me out</label>
            </div>
            <button onClick={this.check} type="submit" class="btn btn-primary">Submit</button>

            { this.state.valid &&
                <Redirect to="/logout" />
            }
        </div>
    );
}
}

export default Login;