Question

How to add state with array to class App and output the array in React JS

Answer 1

// todo/src/projects/ToDo.js

import React, { Component } from 'react';

class ToDo extends Component {
    render() {
        return this.props.todo.map((td) => (
             <h2>{`${td.id} - ${td.mission} - ${td.completed}`}</h2>
        ));
    }
}


export default ToDo;

// App.js

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

class App extends Component {
    state = {
      todoApp: [
        {
          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.todoApp}/>
          </div>
      );
    }
}

export default App;



/*
run:

1234 - Read a book - false
9872 - Watch a movie - false
7389 - Write the code - true
5621 - Play with kids - true

*/

 

70+ SQL courses for beginners and professionals