getInitialState on new react v15.4.2 loop data

Question

How to use getInitialState on a new version of react loop data
old version of react works like this

getInitialState() {
   return { 
     Thumbnails: [{ url: 'sample_url', name: 'sample_name' }] // this works fine
   };
}

I am using laravel with gulp but when i include the data name and url
the loaded data makes some error. I can't Identify what causes the error

I load the render function in the component.
I watched the following instruction from laracast but they are using lower version on react and another thing is they load the render function in createClass.

My only Question is proper way to load state with JSON DATA

Thumbox.js

import React from 'react';
import ReactDOM from 'react-dom';

class Thumbox extends React.Component {

    constructor(props, context) {
        super(props, context);

        this.state = {

           // this fails
           Thumbnails: [{
               url: '#sample',
               ename: 'Hello'
           }]

           // this works
           // Thumbnails: []

        }
    }

    render() {

        var newThumbnail = function(tb) {
            return <Thumbnail ename={tb.ename} url={tb.url} />
        };      

        return (
            <div>
                <h1>Working with React</h1>
                <ul>
                    { this.state.Thumbnails.map(newThumbnail) }
                </ul>
            </div>
        );
    }
}


ReactDOM.render(<Thumbox />, document.getElementById('app-react'));

Thumbnail.js

import React from 'react';
import ReactDOM from 'react-dom';

class Thumbnail extends React.Component {
    render() {
        return (
            <li>
                <a className="thumb" href={ this.props.url } >{this.props.ename}</a>
            </li>
        );
    }
}

I reproduced your code here and it's working: https://jsfiddle.net/mrlew/81cakxg0/ . Why you say it's failing? — mrlew, Feb 08 '17 at 12:15

score 0 · Accepted Answer · answered Feb 08 '17 at 13:01

You need to export Thumbnail component from Thumbnail.js and then import it in Thumbbox.js for your code to work. Do that and it should work properly

Thumbox.js

import React from 'react';
import ReactDOM from 'react-dom';
import Thumbnail from './path/to/Thumbnail';

class Thumbox extends React.Component {

    constructor(props, context) {
        super(props, context);

        this.state = {

           // this fails
           Thumbnails: [{
               url: '#sample',
               ename: 'Hello'
           }]

           // this works
           // Thumbnails: []

        }
    }

    render() {

        var newThumbnail = function(tb) {
            return <Thumbnail ename={tb.ename} url={tb.url} />
        };      

        return (
            <div>
                <h1>Working with React</h1>
                <ul>
                    { this.state.Thumbnails.map(newThumbnail) }
                </ul>
            </div>
        );
    }
}


ReactDOM.render(<Thumbox />, document.getElementById('app-react'));

Thumbnail.js

import React from 'react';
import ReactDOM from 'react-dom';

export default class Thumbnail extends React.Component {
    render() {
        return (
            <li>
                <a className="thumb" href={ this.props.url } >{this.props.ename}</a>
            </li>
        );
    }
}

can you explain what is the use of this === export default class Thumbnail extends React.Component === — RED, Feb 21 '17 at 03:57
`export default class Thumbnail extends React.Component` is a one liner syntax for creating a react component by extending the React.Component class and exporting it as a default component. — Shubham Khatri, Feb 21 '17 at 04:31
see this answer for understanding more about `default` and `named exports` http://stackoverflow.com/questions/42051886/default-keyword-in-import-export-es6/42051990#42051990 — Shubham Khatri, Feb 21 '17 at 04:33

getInitialState on new react v15.4.2 loop data

1 Answers1