title: JSON Parse error: Unable to parse JSON string in React Native
body: <p>I am having trouble trying the parse this JSON data. I can fix this error by limiting my data to just one like this: <code>{"id": "13", "imagename": "hello"}</code>, but this is my whole data:</p>
  
  <pre><code>{"id":"1","imagename":"dog"}{"id":"2","imagename":"cat"}{"id":"3","imagename":"mouse"}{"id":"4","imagename":"deer"}{"id":"5","imagename":"shark"}{"id":"6","imagename":"ant"}
  </code></pre>
  
  <p>I think React Native cannot handle no more than one data in <code>&lt;Text&gt;</code>?</p>
  
  <pre><code>     export default class HomeScreen extends React.PureComponent {
      constructor(props)
  {
  
    super(props);
  
    this.state = {
    isLoading: true,
  };
  
  componentDidMount(){
       fetch(`http://www.example.com/React/data.php`, {
       method: 'POST',
       headers: {
         'Accept': 'application/json',
         'Content-Type': 'application/json',
       },
     }).then((response) =&gt; response.json())
         .then((responseJson) =&gt; {
  
        data = responseJson;
        this.setState({ loading: false });
  
  
     }).catch((error) =&gt; {
       console.warn(error);
     });
  
  }
  
  renderItems() {
    const items = [];
    this.data.foreach( ( dataItem ) =&gt; {
      items.put( &lt;Text&gt;{ dataItem.id }&lt;/Text&gt; );
    } )
    return items;
  } &lt;--- This is an attempt to try to put them in an object and then display the data, but I keep getting undefined.
  
  render() {
  
  
      if (this.state.isLoading) {
        return (
          &lt;View style={{flex: 1, paddingTop: 20}}&gt;
            &lt;ActivityIndicator /&gt;
          &lt;/View&gt;
        );
      }
  
  
        return(
  
           &lt;View style = { styles.MainContainer }&gt;
            &lt;View&gt;
             &lt;Card&gt;          
                &lt;View&gt;
                &lt;Text&gt;{this.data.id}&lt;/Text&gt;
                &lt;Text&gt;{this.data.imagename}&lt;/Text&gt;
               &lt;/View&gt;
             &lt;/Card&gt;
             &lt;/View&gt;
           &lt;/View&gt;
         );
       }
  const styles = StyleSheet.create({
    MainContainer: {
      flex:1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#333',
    },
       }
  </code></pre>
  
  <p>I also looked up other parse error questions, but our code is very different. Like I said before, this code works if the data is limited to one. I can't figure out why it does not allow more than one data to be displayed.</p>
  
  <p>EDIT: When I changed my <code>response.json</code> to text, I got no results so that could be a reason. When I changed <code>&lt;Text&gt;{this.data.id}&lt;/Text&gt;</code> to just this.data, I can see all of the data. How do I get just the id from that data?</p>