ReactJS not updating the state

Question

Hello for some reason React would not update the state globally,

  componentDidMount() {
    var id = window.location.href.split('/')[3]
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "https://reactAppBackend/edit/" + id);
    xhr.send();
    xhr.onloadend = () => {
      this.setState({singlePost: JSON.parse(xhr.responseText)})
      console.log(this.state.singlePost[0])
    };
  }

when I run this the console log return data this data

{_id: "5e6016adb8c32b00883f55f5", postTitle: "RE4", postContent: "the best ", __v: 0}

but when I try to render the state:

  render() {
    return (
      <div>{this.state.singlePost[0]}</div>
    )
  }

it is not rendering anything.

`componentDidMount` is not an async function – Antoni Mar 18 '20 at 12:43 — Antoni, Mar 18 '20 at 12:43
when I change the state so for example it is working – n2kin Mar 19 '20 at 12:06 — n2kin, Mar 19 '20 at 12:06

joy08 · Answer 1 · 2020-03-18T12:49:16.660

0

There's a typo inside your render. It's should be singlePost


render() {
    return (
      <div>{this.state.singlePost[0]}</div>
    )
  }

edited Mar 18 '20 at 12:49

answered Mar 18 '20 at 12:43

joy08

9,004
8
38
73

score 0 · Answer 2 · answered Mar 18 '20 at 12:43

0

You have a typo here: <div>{this.state.siglePost[0]}</div>

siglePost, should be singlePost

answered Mar 18 '20 at 12:43

Sebastian Berglönn

3,920
2
17
33

score 0 · Answer 3 · answered Mar 19 '20 at 13:49

The state was an array, I have managed to show the response with the map function.

  render() {
    return (
      <div>
        {this.state.singlePost.map(post => {
          return (
            <div>
              <p>{post.postTitle}</p>
              <p>{post.postContent}</p>
              <img src={post.postPicturePath} />
            </div>
          );
        })}
      </div>
    );
  }

ReactJS not updating the state

3 Answers3