Question

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

Answer 1

// 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 todoAP = {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

*/

// todo/src/projects/ToDo.js

import React, { Component } from 'react';
import ToDoItem from './ToDoItems';

class ToDo extends Component {
    render() {
        return this.props.todoAP.map((td) => (
            <ToDoItem key = {td.id} todo = {td}/>
        ));
        
    }
}

export default ToDo;

// todo/src/projects/ToDoItems.js

import React, { Component } from 'react'

// Component
export class ToDoItems extends Component {
  render() {
    return (
      <div>
          <h3>{`${this.props.todo.id} - ${this.props.todo.mission} - 
                ${this.props.todo.completed}`}</h3>
      </div>
    )
  }
}

export default ToDoItems

 

70+ SQL courses for beginners and professionals

Answer 2

// 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 todoAP = {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

*/

// todo/src/projects/ToDo.js

import React, { Component } from 'react';
import ToDoItem from './ToDoItems';
import PropTypes from 'prop-types'; 

class ToDo extends Component {
    render() {
        return this.props.todoAP.map((td) => (
            <ToDoItem key = {td.id} todo = {td}/>
        ));
        
    }
}

ToDo.propTypes = {
    todoAP: PropTypes.array.isRequired
}

export default ToDo;

// todo/src/projects/ToDoItems.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'; 

// Component
export class ToDoItems extends Component {
  render() {
    return (
      <div>
          <h3>{`${this.props.todo.id} - ${this.props.todo.mission} - 
                ${this.props.todo.completed}`}</h3>
      </div>
    )
  }
}

ToDoItems.propTypes = {
  todo: PropTypes.object.isRequired
}

export default ToDoItems

 

70+ SQL courses for beginners and professionals