Question

How to add state to class App in React JS

Answer 1

// todo/src/projects/ToDo.js

import React from 'react';

function ToDo() {
  return (
    <div>
      <h1>ToDo</h1>
    </div>
  );
}

export default ToDo;

// App.js

import React, { Component } from 'react';
import './App.css';
import ToDo from './projects/ToDo'

class App extends Component {
    state = {
      todo: [
        {
          id: 1234,
          mission: 'Read a book',
          completed: false
        },
        {
          id: 9872,
          mission: 'Watch a movie',
          completed: false
        },
        {
          id: 7389,
          mission: 'Write the code',
          completed: true
        },
        {
          id: 5621,
          mission: 'Play with kids',
          completed: true
        },
      ]
    }
    render() {
        console.log(this.state.todo);
        return (
          <div className="App">
            { /* Component*/ }
            <ToDo />
          </div>
      );
    }
}

export default App;



/*
run:

0:
id: 1234
mission: "Read a book"
completed: false
1:
id: 9872
mission: "Watch a movie"
completed: false
2:
id: 7389
mission: "Write the code"
completed: true
3:
id: 5621
mission: "Play with kids"
completed: true

*/

 

70+ SQL courses for beginners and professionals

Answer 2

// todo/src/projects/ToDo.js

import React, { Component } from 'react';

class ToDo extends Component {
    render() {
      console.log(this.props.todo);
      return (
        <div>
            <h1>ToDo</h1>
        </div>
    );
  }
}


export default ToDo;


/*
run:

0:
completed: false
id: 1234
mission: "Read a book"
1:
completed: false
id: 9872
mission: "Watch a movie"
2:
completed: true
id: 7389
mission: "Write the code"
3:
completed: true
id: 5621
mission: "Play with kids"

*/

// App.js

import React, { Component } from 'react';
import './App.css';
import ToDo from './projects/ToDo'

class App extends Component {
    state = {
      todo: [
        {
          id: 1234,
          mission: 'Read a book',
          completed: false
        },
        {
          id: 9872,
          mission: 'Watch a movie',
          completed: false
        },
        {
          id: 7389,
          mission: 'Write the code',
          completed: true
        },
        {
          id: 5621,
          mission: 'Play with kids',
          completed: true
        },
      ]
    }
    render() {
        return (
          <div className="App">
            { /* Component*/ }
            <ToDo todo={this.state.todo}/>
          </div>
      );
    }
}

export default App;

 

70+ SQL courses for beginners and professionals