0

i'm new in React Native. i have list data in dataSet.js file. And i want to call data list from dataSet file to Form.js file via state. But, i don't know to create that. this is my code but still doesn't working.

dataSet file

export const data = [
  {
    index: 1,
    title: 'title 1',
    due: 'Due1',
    content: 'content1'
  },
  {
    index: 2,
    title: 'title 2',
    due: 'Due2',
    content: 'content2'
  },

  {
    index: 3,
    title: 'title 3',
    due: 'Due3',
    content: 'content3'
  }
];

Form.js file

 import { data } from './dataSet';

    class Form extends Component {
      constructor(props){
      super(props)
      this.state ={
          title :data[props.pageIndex].title,
          due : data[props.pageIndex].due,
          content : data[props.pageIndex].content,
      }

   }
      render() {
        return (

            <View style={styles.container}>
                  <Text style={styles.activeTitle}>
                    {title}
                  </Text>
                  <Text style={styles.activeDue}>
                    {due}
                  </Text>
              <Text>
                {content}
              </Text>
            </View>
        );
      }
    }
    export default Form;
Quinn
  • 697
  • 1
  • 10
  • 25

2 Answers2

0

There is something wrong. If your dataSet file only contains raw data, why is it a js file?

Generally raw data files are CSV(comma seperated Value), SSV etc. Depending upon your file type you should read data from it. That means you'll traverse through the entire file and take what is useful to you.

If it is a CSV here is how you can read from the file. It transfers the data into array :

// ref: http://stackoverflow.com/a/1293163/2343
// This will parse a delimited string into an array of
// arrays. The default delimiter is the comma, but this
// can be overriden in the second argument.
function CSVToArray( strData, strDelimiter ){
    // Check to see if the delimiter is defined. If not,
    // then default to comma.
    strDelimiter = (strDelimiter || ",");

    // Create a regular expression to parse the CSV values.
    var objPattern = new RegExp(
        (
            // Delimiters.
            "(\\" + strDelimiter + "|\\r?\\n|\\r|^)" +

            // Quoted fields.
            "(?:\"([^\"]*(?:\"\"[^\"]*)*)\"|" +

            // Standard fields.
            "([^\"\\" + strDelimiter + "\\r\\n]*))"
        ),
        "gi"
        );


    // Create an array to hold our data. Give the array
    // a default empty first row.
    var arrData = [[]];

    // Create an array to hold our individual pattern
    // matching groups.
    var arrMatches = null;


    // Keep looping over the regular expression matches
    // until we can no longer find a match.
    while (arrMatches = objPattern.exec( strData )){

        // Get the delimiter that was found.
        var strMatchedDelimiter = arrMatches[ 1 ];

        // Check to see if the given delimiter has a length
        // (is not the start of string) and if it matches
        // field delimiter. If id does not, then we know
        // that this delimiter is a row delimiter.
        if (
            strMatchedDelimiter.length &&
            strMatchedDelimiter !== strDelimiter
            ){

            // Since we have reached a new row of data,
            // add an empty row to our data array.
            arrData.push( [] );

        }

        var strMatchedValue;

        // Now that we have our delimiter out of the way,
        // let's check to see which kind of value we
        // captured (quoted or unquoted).
        if (arrMatches[ 2 ]){

            // We found a quoted value. When we capture
            // this value, unescape any double quotes.
            strMatchedValue = arrMatches[ 2 ].replace(
                new RegExp( "\"\"", "g" ),
                "\""
                );

        } else {

            // We found a non-quoted value.
            strMatchedValue = arrMatches[ 3 ];

        }


        // Now that we have our value string, let's add
        // it to the data array.
        arrData[ arrData.length - 1 ].push( strMatchedValue );
    }

    // Return the parsed data.
    return( arrData );
}
atitpatel
  • 3,104
  • 1
  • 24
  • 34
  • ok, it's just example. but, if i have dataSet like that, how to read data from dataSet to Form file via state or props. can you correct code from Form.js above. thanks for reply @atitpatel – Quinn May 11 '17 at 04:43
0

Your import and constructor need edit. The name of the imported should be the same as in the dataSet file. Pass the props to the constructor so you can access it's child in it. Also this.state is a object, so ; should changed to ,. 

import { data } from './dataSet';

class Form extends Component {
   constructor(props){
      super(props)
      this.state ={
          title :data[props.pageIndex].title,
          due : data[props.pageIndex].due,
          content : data[props.pageIndex].content,
      }
   }
...
Meysam Izadmehr
  • 3,103
  • 17
  • 25