Welcome to collectivesolver - Programming & Software Q&A. A website you can trust. All programs tested and works. Contact: aviboots(AT)netvision.net.il
BlueHost Web Hosting

Bonsai Boy of New York Bonsai Trees and Accessories

Website Domains Names & Hosting | Domain.com

Ecommerce Software - Best Ecommerce Platform Made for You - Free Trial

DreamHost Web Hosting


Instant Grammar Checker - Correct all grammar errors and enhance your writing

Liquid Web Cloud VPS Hosting

Disclosure We are a professional Programming & Software Q&A website, that receives compensation from some of the links whose we show you with Information. It means that my content may contain affiliate links.

12,759 questions

17,366 answers

573 users

How to add state to class App in React JS

2 Answers

0 votes
// 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

*/

 




answered Mar 24 by avibootz
edited Mar 24 by avibootz
0 votes
// 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;

 




answered Mar 24 by avibootz
...