Welcome to collectivesolver - Programming & Software Q&A with code examples. A website with trusted programming answers. All programs are tested and work.

Contact: aviboots(AT)netvision.net.il

Prodentim Probiotics Specially Designed For The Health Of Your Teeth And Gums

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

Teach Your Child To Read

Powerful WordPress hosting for WordPress professionals

Disclosure: My content contains affiliate links.

31,166 questions

40,722 answers

573 users

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

3 Answers

0 votes
// 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 style = {{ backgroundColor: '#f3ff33'}} >
          <h3>{`${this.props.todo.id} - ${this.props.todo.mission} - 
                ${this.props.todo.completed}`}</h3>
      </div>
    )
  }
}

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

export default ToDoItems

 





answered Mar 25, 2020 by avibootz
0 votes
// 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 style = { itemStyle } >
          <h3>{`${this.props.todo.id} - ${this.props.todo.mission} - 
                ${this.props.todo.completed}`}</h3>
      </div>
    )
  }
}

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

const itemStyle = {
    backgroundColor: '#f3ff33'
}

export default ToDoItems

 





answered Mar 25, 2020 by avibootz
0 votes
// 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 {
  setStyle = () => {
    return {
      backgroundColor: '#f3ff33',
      textDecoration: this.props.todo.completed ? 'line-through' : 'none'
    }
  }
  render() {
    return (
      <div style = { this.setStyle() } >
          <h3>{`${this.props.todo.id} - ${this.props.todo.mission} - 
                ${this.props.todo.completed}`}</h3>
      </div>
    )
  }
}

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

export default ToDoItems

 





answered Mar 25, 2020 by avibootz

Related questions

...