RawText "; }" must be wrapped in an explicit <Text>

Question

I'm new to React and getting this error :

RawText "; }" must be wrapped in an explicit

When I try to map my JSON array. This is happening everytime I try to map something. I've read that it has something to do with space characters but I cant find any. Any tips on how I can debug this? Cheers! Here is the code

    import React from 'react';
    import {  AppRegistry,  asset,  Pano,  Text,  Image,  View,  StyleSheet,} from 'react-vr';
    
    export default class Kuji extends React.Component {
      static defaultProps = {
        prjSource: 'projects.json',
      };
    
    constructor(props)
    {
      super(props);
    
      this.state =  {
        data: null,
        projectId: null,
        rotation: null,
      };
    }
    
    componentDidMount()
    {
      fetch(asset(this.props.prjSource).uri)
      .then(response => response.json())
      .then(responseData => {
        this.init(responseData);
      })
      .done();
    }
    
    init(projectConfig) {
      // Initialize the tour based on data file.
      this.setState({
        data: projectConfig,
      });
    }
    
    
    render() {
      if(!this.state.data)
      {
        return null;
      }
    
    const projectId = (this.state.projectId);
    const projectData = (this.state.data.projects);
    
      return (
        <View>
          <Pano source={asset('dolphin.jpg')}/>
          <View>
            {projectData.map((project, index) => {
              return (
                console.log(project.title)
                );
              })};
            }
          </View>
        </View>
      )
    };
    }
    
    AppRegistry.registerComponent('Kuji', () => Kuji);

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

Answer 1

I think you have an extra }; in your render after your projects.map code ends, which react treats it as a string. Remove it and try, your code should work fine.

import React from 'react';
import {  AppRegistry,  asset,  Pano,  Text,  Image,  View,  StyleSheet,} from 'react-vr';

export default class Kuji extends React.Component {
  static defaultProps = {
    prjSource: 'projects.json',
  };

constructor(props)
{
  super(props);

  this.state =  {
    data: null,
    projectId: null,
    rotation: null,
  };
}

componentDidMount()
{
  fetch(asset(this.props.prjSource).uri)
  .then(response => response.json())
  .then(responseData => {
    this.init(responseData);
  })
  .done();
}

init(projectConfig) {
  // Initialize the tour based on data file.
  this.setState({
    data: projectConfig,
  });
}


render() {
  if(!this.state.data)
  {
    return null;
  }

const projectId = (this.state.projectId);
const projectData = (this.state.data.projects);

  return (
    <View>
      <Pano source={asset('dolphin.jpg')}/>
      <View>
        {projectData.map((project, index) => {
          return (
            console.log(project.title)
            );
          })
        }
      </View>
    </View>
  )
};
}

AppRegistry.registerComponent('Kuji', () => Kuji);

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