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,757 questions

17,364 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 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 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 by avibootz
...