Picking up parts of a JSON vector

Question

I am doubtful about the GET function of my JS (React JS) code, I have the GET function using the Fetch api, it returns the values a certain link.json containing an array. Using this link as an example: http://jsonplaceholder.typicode.com/posts - I want to take the contents of the first 'Id'(1) and put in one part of the code, and also another 'Id' (Example: 5) any of the array to another part of the code.

constructor(props) {
  super(props);
  this.state = {
      data:[]
      }
  }
  componentDidMount(){
        let URL = 'http://jsonplaceholder.typicode.com/posts'

           fetch(URL)
           .then(function(response) {
              let data = response.json()
              return data;
           })
           .then((json) => {
              console.log('mensagens: ', json)
              this.setState({data : json});
           })
           .catch(function(ex) {
              console.log('parsing failed', ex)
           })
  }

UPDATING:

      {
         this.state.data.map(obj => (
           if(obj.displayPortraitLeft == true){
             <div className="box-body">
            <div className="direct-chat-msg undefined">
                      <div className="direct-chat-info clearfix">
                      <span className="direct-chat-name pull-right">{obj.userName}</span>
                      <span className="direct-chat-timestamp pull-left">{obj.time}</span>
                      </div>
               </div>
             </div>
           }else{
               <div className="box-body">
            <div className="direct-chat-msg undefined">
                      <div className="direct-chat-info clearfix">
                      <span className="direct-chat-name pull-right">{obj.userName}</span>
                      <span className="direct-chat-timestamp pull-left">{obj.time}</span>
                      </div>
               </div>
             </div>
         ))
     }

Returns in browser : . /src/chat/Chat.js Syntax error: C:/Users/Henri/Desktop/funcionando/my-app/src/chat/Chat.js: Unexpected token (41:19)

  39 |              {
  40 |                  this.state.data.map(obj => (
> 41 |                    if(obj.displayPortraitLeft == true){
     |                    ^
  42 |                      <div>
  43 |                      <div className="box-body">
  44 | 

Answer 1

You can do it like this, using the this.state.data as array that is and iterating with map to generate JSX

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    }
  }
  componentDidMount(){
        let URL = 'https://jsonplaceholder.typicode.com/posts'
           fetch(URL)
           .then(function(response) {
              let data = response.json()
              return data;
           })
           .then((json) => {
              console.log('mensagens: ', json)
              this.setState({data : json});
           })
           .catch(function(ex) {
              console.log('parsing failed', ex)
           })
  }
  render(){
      return (
          <div>
            {
                this.state.data.map(obj => (
                  <div>{obj.id} {obj.title}</div>
                ))
            }
          </div>
      );
  }
}
ReactDOM.render(
  <App/>,
  document.getElementById('app')
);

<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>

<div id="app"></div>