DEV Community: adriangheo

04.01 - Redux and Redux Saga

adriangheo — Wed, 17 May 2023 04:52:18 +0000

App preview:

Project files:

src/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>SAGA-App</title>

</head>

<body>
    <div class="container">
        <div id="root"></div>
    </div>
</body>

</html>

src/index.js

import React from 'react';
import createSagaMiddleware from 'redux-saga';
import { render } from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import { logger } from 'redux-logger';
import reducer from './reduxReducers';
import App from './App';
import rootSaga from './sagas';

// Create saga middleware
const sagaMiddleware = createSagaMiddleware();

// Create a redux store with reducer and middleware (saga and logger)
const store = createStore(
  reducer,
  applyMiddleware(sagaMiddleware, logger),
);

// Run the root saga
sagaMiddleware.run(rootSaga);

// Render the application
render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root'),
);

// Enable Hot Module Replacement (HMR)
if (module.hot) {
  module.hot.accept(App);
}

src/sagas.js

import { put, takeLatest, all } from 'redux-saga/effects';

// Define a generator function that fetches an image and dispatches an 'IMAGE_RECEIVED' action
function* fetchImage() {
  const response = yield fetch('https://picsum.photos/200')
    .then(response => response.blob());

  const url = URL.createObjectURL(response);
  yield put({ type: "IMAGE_RECEIVED", url: url || "Error fetching data" });
}

// Define a watcher saga that watches for 'GET_IMAGE' actions and calls fetchImage when one is dispatched
function* actionWatcher() {
  yield takeLatest('GET_IMAGE', fetchImage)
}

// Define a root saga that runs all the sagas together
export default function* rootSaga() {
  yield all([
    actionWatcher(),
  ]);
}

src/reduxReducers.js

// Define a reducer function that initializes state and handles two action types: 'GET_IMAGE' and 'IMAGE_RECEIVED'
const reducer = (state = {}, action) => {
  switch (action.type) {
    case 'GET_IMAGE':
       // When 'GET_IMAGE' is received, set loading to true
      return { ...state, loading: true };
    case 'IMAGE_RECEIVED':
      // When 'IMAGE_RECEIVED' is received, update the image in the state and set loading to false
      return { ...state, image: action.url, loading: false }
    default:
      // For all other action types, return the current state
      return state;
  }
};

// Export the reducer function
export default reducer;

src/reduxActions.js

// Define an action creator function getImage that returns an action of type 'GET_IMAGE'
export const getImage = () => ({
  type: 'GET_IMAGE',
});

src/App.jsx

import React from 'react';
import Button from './containers/Button';
import ImageItem from './containers/ImageItem'
import Loading from './containers/Loading'

// Create a functional component App that renders a Button, a Loading and an ImageItem component within a div
let App = () => (
  <div>
    <Button />
    <Loading />
    <ImageItem />
  </div>
);

// Export the App component
export default App;

src/containers/ImageItem.jsx

import React from 'react';
import { connect } from 'react-redux'

// Define a functional component ImageItem that renders an img element if the image prop is truthy
let ImageItem = ({ image }) => (
  image ?
    <article>
      <img src={image} alt="Randomly generated" />
    </article> :
    null
);

// Define a mapStateToProps function that maps state to props
const mapStateToProps = (state) => ({
  image: state.image,
})

// Connect the ImageItem component to the Redux store
ImageItem = connect(
  mapStateToProps,
  null
)(ImageItem)

// Export the connected ImageItem component
export default ImageItem;

src/containers/Loading.jsx

import React from 'react';
import { connect } from 'react-redux'

// Define a functional component Loading that renders a loading message if the loading prop is truthy
let Loading = ({ loading }) => (
  loading ?
    <div>
      <h1>LOADING...</h1>
    </div> :
    null
);

// Define a mapStateToProps function that maps state to props
const mapStateToProps = (state) => ({
  loading: state.loading
})

// Connect the Loading component to the Redux store
Loading = connect(
  mapStateToProps,
  null
)(Loading)

// Export the connected Loading component
export default Loading;

src/containers/Button.jsx

import React from 'react';
import { connect } from 'react-redux';
import { getImage } from '../reduxActions'

// Define a functional component Button that renders a button and dispatches the getImage action when clicked
const Button = ({getImage}) => {
  return (
    <button 
      onClick={getImage} 
    >Press to see Image</button>
  );
};

// Define a mapDispatchToProps function that maps dispatch to props
const mapDispatchToProps = {
  getImage: getImage,
};

// Connect the Button component to the Redux store
export default connect(
  null,
  mapDispatchToProps,
)(Button);

03.12 - State & Props - Send color change data to parent comp (function components)

adriangheo — Mon, 26 Dec 2022 21:43:09 +0000

App preview:

Project files:

src/App.js

import './App.css';
import ParentComponent from './components/ParentComponent';


function App() {
  return (
    <div className="App">
        <p><b>App.js</b> |function|</p>
        <ParentComponent/>
    </div>
  );
}

export default App;

src/App.js

.App{
  background-color: lightskyblue;
  padding: 10px 10px;
}

p{
  margin-top: 6px; 
  margin-bottom: 12px 
}

src/components/ParentComponent.jsx

import React, { useState } from "react"
import ChildComponent from "./ChildComponent"
import "./ParentComponent.css"

function ParentComponent(){
    const[backgroundColor, setBackgroundColor] = useState('pink');

    const handleInputChange = (event) => {
        setBackgroundColor(event.target.value);
    }

    return(
        <div className="ParentComponent"  style={{backgroundColor: backgroundColor}}>
            <p><b>ParentComponent.jsx</b> |function|</p>
            <ChildComponent  handleInputChange={(event)=>{handleInputChange(event)}}  />
        </div>
    )
}

export default ParentComponent

src/components/ParentComponent.css

.ParentComponent{
    background-color: lightsalmon;
    padding: 10px 10px;
    margin: 10px 10px;
}

h2{
    margin-top: 0px; 
    margin-bottom: 6px 
}

src/components/ChildComponent.jsx

import React from "react";
import "./ChildComponent.css"

function ChildComponent(props){

    const handleChange = (event) => {
        props.handleInputChange(event);
    }

    return (
        <div className="ChildComponent">
            <p><b>ChildComponent.jsx</b> |function|</p>
            <input onChange={(event)=>{handleChange(event)}}></input>
        </div>
    );
}

export default ChildComponent;

src/components/ChildComponent.css

.ChildComponent{
    background-color: lightgreen;
    padding: 10px 10px;
    margin: 10px 10px;
}

h3{
    margin-top: 0px; 
    margin-bottom: 6px 
}

03.11 - State & Props - Send color change data to parent comp (class components)

adriangheo — Mon, 26 Dec 2022 21:42:45 +0000

App preview:

Project files:

src/App.js

import React from 'react';
import './App.css';
import ParentComponent from './components/ParentComponent';


class App extends React.Component{
  render(){
    return (
      <div className="App">
          <p><b>App.js</b> |class|</p>
          <ParentComponent/>
      </div>
    );
  }
}

export default App;

src/App.css

.App{
  background-color: lightskyblue;
  padding: 10px 10px;
}

p{
  margin-top: 6px; 
  margin-bottom: 12px 
}

src/components/ParentComponent.jsx

import React from "react"
import ChildComponent from "./ChildComponent"
import "./ParentComponent.css"

class ParentComponent extends React.Component{
    constructor(){
        super();
        this.state = {
          backgroundColor: "pink"
        }
    }  

    handleInputChange = (event) => {
        this.setState({backgroundColor: event.target.value})
    }

    render(){
        return(
            <div className="ParentComponent"  style={{backgroundColor: this.state.backgroundColor}}>
                <p><b>ParentComponent.jsx</b> |class|</p>
                <ChildComponent  handleInputChange={(event)=>{this.handleInputChange(event)}}  />
            </div>
        )
    }
}

export default ParentComponent

src/components/ParentComponent.css

.ParentComponent{
    background-color: lightsalmon;
    padding: 10px 10px;
    margin: 10px 10px;
}

h2{
    margin-top: 0px; 
    margin-bottom: 6px 
}

src/components/ChildComponent.jsx

import React from "react";
import "./ChildComponent.css"


class ChildComponent extends React.Component{
    constructor(props){
        super(props);
    }

    handleChange = (event) => {
        this.props.handleInputChange(event);
    }

    render(){
        return (
            <div className="ChildComponent">
                <p><b>ChildComponent.jsx</b> |class|</p>
                <input onChange={(event)=>{this.handleChange(event)}}></input>
            </div>
        );
    }
}

export default ChildComponent;

src/components/ChildComponent.css

.ChildComponent{
    background-color: lightgreen;
    padding: 10px 10px;
    margin: 10px 10px;
}

h3{
    margin-top: 0px; 
    margin-bottom: 6px 
}

03.10 - State & Props - Send counter data to parent component (functional components)

adriangheo — Mon, 26 Dec 2022 01:44:52 +0000

App preview:

Project files:

src/App.js

import './App.css';
import ParentComponent from './components/ParentComponent';


function App() {
  return (
    <div className="App">
        <p><b>App.js</b> |function|</p>
        <ParentComponent/>
    </div>
  );
}

export default App;

src/App.css

.App{
  background-color: lightskyblue;
  padding: 10px 10px;
}

p{
  margin-top: 6px; 
  margin-bottom: 12px 
}

src/components/ParentComponent.jsx

import React, { useState } from "react"
import ChildComponent from "./ChildComponent"
import "./ParentComponent.css"

function ParentComponent(){
    const [count, setCounter] = useState(0);

    const updateCounterList = () => {
        setCounter(count + 1)
    }

    return(
        <div className="ParentComponent">
            <p><b>ParentComponent.jsx</b> |function|</p>
            <ChildComponent updateCounterList={()=>{updateCounterList()}}/>
            <p>Click Counter value is {count}.</p>
        </div>
    )
}

export default ParentComponent

src/components/ParentComponent.css

.ParentComponent{
    background-color: lightsalmon;
    padding: 10px 10px;
    margin: 10px 10px;
}

h2{
    margin-top: 0px; 
    margin-bottom: 6px 
}

src/components/ChildComponent.jsx

import React from "react";
import "./ChildComponent.css"

function ChildComponent (props) {

    const handleClick = () => {
        props.updateCounterList();
    }

    return (
        <div className="ChildComponent">
            <p><b>ChildComponent.jsx</b> |function|</p>
            <button onClick={()=>{handleClick()}}>Add 1</button>
        </div>
    );
}

export default ChildComponent;

src/components/ChildComponent.css

.ChildComponent{
    background-color: lightgreen;
    padding: 10px 10px;
    margin: 10px 10px;
}

h3{
    margin-top: 0px; 
    margin-bottom: 6px 
}

03.09 - State & Props - Send counter data to parent component (class components)

adriangheo — Mon, 26 Dec 2022 01:44:44 +0000

App preview:

Project files:

src/App.js:

import React from "react";
import './App.css';
import ParentComponent from "./components/ParentComponent";

class App extends React.Component{

  render(){
    return(
      <div className="App">
        <p><b>App.js</b> |class|</p>
        <ParentComponent/>
      </div>
    )
  }
}

export default App;

src/App.css

.App{
  background-color: lightskyblue;
  padding: 10px 10px;
}

p{
  margin-top: 6px; 
  margin-bottom: 12px 
}

src/components/ParentComponent.jsx

import React from "react"
import ChildComponent from "./ChildComponent"
import "./ParentComponent.css"

class ParentComponent extends React.Component{
    constructor(){
        super();
        this.state = {
          count: 0
        }
    }

    updateCounterList(){
        this.setState((prevState)=>({count: prevState.count+1}))
    }

    render(){
        return(
            <div className="ParentComponent">
                <p><b>ParentComponent.jsx</b> |class|</p>
                <ChildComponent updateCounterList={()=>{this.updateCounterList()}}/>
                <p>Click Counter value is {this.state.count}.</p>
            </div>
        )
    }

}

export default ParentComponent

src/components/ParentComponent.css

.ParentComponent{
    background-color: lightsalmon;
    padding: 10px 10px;
    margin: 10px 10px;
}

h2{
    margin-top: 0px; 
    margin-bottom: 6px 
}

src/components/ChildComponent.jsx

import React from "react";
import "./ChildComponent.css"


class ChildComponent extends React.Component{
    constructor(props){
        super(props);
    }

    handleClick = () => {
        this.props.updateCounterList();
    }


    render(){
        return (
            <div className="ChildComponent">
                <p><b>ChildComponent.jsx</b> |class|</p>
                <button onClick={()=>{this.handleClick()}}>Add 1</button>
            </div>
        );
    }
}

export default ChildComponent;

src/components/ChildComponent.css

.ChildComponent{
    background-color: lightgreen;
    padding: 10px 10px;
    margin: 10px 10px;
}

h3{
    margin-top: 0px; 
    margin-bottom: 6px 
}

03.08 - State & Props - Send TasksList data through multiple components (class components)

adriangheo — Sat, 12 Nov 2022 14:26:08 +0000

App preview:

Project files:

src/App.js

import React, { useEffect, useState } from 'react';
import './App.css'
import TaskList from './components/TaskList';

function App(){
  const [tasks, updateTasks] = useState([]);
  const [newTaskName, updateName] = useState('');
  const [newTaskDescription, updateDescription] = useState('');

  useEffect(() => {
    updateTasks( [
      {
        name: "Buy milk",
        description: "Go to shop and buy one carton of milk. We're out.",
      },
      {
        name: "Take out the dog",
        description: 'Take Buddy out at 07:00, 12:00p.m., and 6.p.m.',
      },
      {
        name: "Clean car",
        description: "Wash the outside and thoroughly vacuum the outside"
      }
    ])
  }, []);


  const handleNameChange = (event) => {
    const inputValue = event.target.value;
    updateName(inputValue)
  }

  const handleDescriptionChange = (event) => {
    const inputValue = event.target.value;
    updateDescription(inputValue)
  }

  const handleFormSubmit = (event) => {
      event.preventDefault(); //prevent page refresh
      const newTask = {
          name: newTaskName,
          description: newTaskDescription
      }
      updateTasks([...tasks, newTask]);
  }


  return (
    <div className="App" >
      <h1>App.js</h1>
      <form onSubmit={(event)=>{handleFormSubmit(event)}} >
        <p>Add a new task:</p>
        <br/>
        <label htmlFor="name">Task name:</label>
        <br/>
        <input 
            type="text" 
            name="name" 
            value={newTaskName} 
            onChange={(event)=>{handleNameChange(event)}}
        />
        <br/>
        <label htmlFor="description">Description:</label>
        <br/>
        <input 
            type="text" 
            name="description" 
            value={newTaskDescription} 
            onChange={(event)=>{handleDescriptionChange(event)}}
        />
        <br/>
        <input type="submit" value="Submit form!"/>
      </form>  
      <TaskList tasks={tasks}/>
    </div>
  );


}


export default App;

src/App.css

.App {
  background-color: lightskyblue;
  padding: 5px 10px;
  margin: 10px
}


h1{
  margin: 0px;
}

form *{
  margin: 2px;
}

src/components/TaskList.jsx

import React from 'react';
import TaskItem from './TaskItem';
import "./TaskList.css"

function TaskList(props){

    console.log(props)
    return(
        <div className='task-list'>
            <h2>TaskList.jsx</h2>
            {
                props.tasks.map((task, index) => {
                    return <TaskItem 
                        name = {task.name}
                        description = {task.description}
                        key = {index}
                    />
                }) 
            }   
        </div>
    );
}

export default TaskList;

src/components/TaskList.css

.task-list{
    background-color: lightsalmon;
    padding: 10px 10px;
    margin: 10px;
}

h2{
    margin: 0px;
}

src/components/TaskItem.jsx

import React from "react";
import "./TaskItem.css"

function TaskItem(props){
    const { name, description } = props;

    return (
        <div className="task-item">
            <div style={{display:"flex", justifyContent:"center"}}>
                <b>TaskItem.jsx</b>
            </div>
            <p><b>{ name }</b></p>
            <p>{ description }</p>
        </div>
    );
}


export default TaskItem;

src/components/TaskItem.css

.task-item{
    background-color: lightgreen;
    padding: 10px 10px;
    margin: 10px;
}


h3{
    margin: 0px;
}

03.07 - State & Props - Send Tasks List data through multiple components (class components)

adriangheo — Sat, 12 Nov 2022 14:19:08 +0000

App preview:

Project files:

src/App.js

import React from 'react';
import './App.css'
import TaskList from './components/TaskList';

class App extends React.Component{
  constructor(){
    super();
    this.state = {
      tasks: [],
      newTaskName: '',
      newTaskDescription: '',
    }
  }

  componentDidMount(){
    this.setState({ tasks: [
      {
        name: "Buy milk",
        description: "Go to shop and buy one carton of milk. We're out.",
      },
      {
        name: "Take out the dog",
        description: 'Take Buddy out at 07:00, 12:00p.m., and 6.p.m.',
      },
      {
        name: "Clean car",
        description: "Wash the outside and thoroughly vacuum the outside"
      },
    ]})
  }

  handleNameChange(event){
    const inputValue = event.target.value;
    this.setState({newTaskName: inputValue})
  }

  handleDescriptionChange(event){
    const inputValue = event.target.value;
    this.setState({newTaskDescription: inputValue})
  }

  handleFormSubmit(event){
      event.preventDefault(); //prevent page refresh
      const newTask = {
          name: this.state.newTaskName,
          description: this.state.newTaskDescription
      }
      this.updateTasksList(newTask);
  }

  updateTasksList(newTask){
    this.setState((previousState)=>{
      return {tasks: [
        ...previousState.tasks, 
        newTask
      ]}
    });
  }

  render(){

    return (
      <div className="App" >
        <h1>App.js</h1>
        <form onSubmit={(event)=>{this.handleFormSubmit(event)}} >
          <p>Add a new task:</p>
          <br/>
          <label htmlFor="name">Task name:</label>
          <br/>
          <input 
              type="text" 
              name="name" 
              value={this.state.name} 
              onChange={(event)=>{this.handleNameChange(event)}}
          />
          <br/>
          <label htmlFor="description">Description:</label>
          <br/>
          <input 
              type="text" 
              name="description" 
              value={this.state.name} 
              onChange={(event)=>{this.handleDescriptionChange(event)}}
          />
          <br/>
          <input type="submit" value="Submit form!"/>
        </form>  
        <TaskList tasks={this.state.tasks}/>
      </div>
    );
  }
}

export default App;

src/App.css

src/App.css

src/components/TaskList.jsx

import React from 'react';
import TaskItem from './TaskItem';
import "./TaskList.css"

class TaskList extends React.Component{
    constructor(props){
        super(props);
        this.state = {}
    }


    render(){
        return(
            <div className='task-list'>
                <h2>TaskList.jsx</h2>
                {
                    this.props.tasks.map((task, index) => {
                        return <TaskItem 
                            name = {task.name}
                            description = {task.description}
                            key = {index}
                        />
                    }) 
                }   
            </div>
        );
    }

}

export default TaskList;

src/components/TaskList.css

.task-list{
    background-color: lightsalmon;
    padding: 10px 10px;
    margin: 10px;
}

h2{
    margin: 0px;
}

src/components/TaskItem.jsx

import React from "react";
import "./TaskItem.css"

function TaskItem(props){
    const { name, description } = props;

    return (
        <div className="task-item">
            <div style={{display:"flex", justifyContent:"center"}}>
                <b>TaskItem.jsx</b>
            </div>
            <p><b>{ name }</b></p>
            <p>{ description }</p>
        </div>
    );
}


export default TaskItem;

src/components/TaskItem.css

.task-item{
    background-color: lightgreen;
    padding: 10px 10px;
    margin: 10px;
}


h3{
    margin: 0px;
}

03.06 - State & Props - Send User List data through multiple components (functional components)

adriangheo — Sat, 12 Nov 2022 07:50:02 +0000

App preview:

Project files:

TREBUIE CONTINUAT CU RESTUL

src/App.js

import React, { useState, useEffect}  from "react";
import "./App.css";
import UserList from "./components/UserList";

function App () {
  const [users, updateUsers] = useState([]);
  const [newName, updateNewName] = useState('');
  const [newEmail, updateNewEmail] = useState('');

  useEffect(() => {
    updateUsers( [
      {
        name: "lulu",
        email: "lulu@gmail.com"
      },
      {
        name: "bubu",
        email: "bubu@gmail.com"
      }
    ])
  }, []);

  const handleNameInputChange = (event) => {
    const inputValue = event.currentTarget.value;
    updateNewName(inputValue);
  }

  const handleEmailInputChange = (event) => {
    const inputValue = event.currentTarget.value;
    updateNewEmail(inputValue);
  }

  const handleFormSubmit = (event) => {
    event.preventDefault(); //prevent page refresh
    const newUser = {
        name: newName,
        email: newEmail,
    }
    updateUsers([...users, newUser]);
  }


  return(
    <div className="App">

      <form onSubmit={(event)=>{handleFormSubmit(event)}}>
        <label htmlFor="name">Name: </label>
        <input type="text" name="name" onChange={(event)=>{handleNameInputChange(event)}}></input>

        <label htmlFor="email">Email: </label>
        <input type="mail" name="email" onChange={(event)=>{handleEmailInputChange(event)}}></input>

        <input type="submit" value="Submit Form!"></input>
      </form>

      <h1>App.js</h1>

      <UserList users={users}/>
    </div>
)
}
export default App;

src/App.css

.App{
  background-color: lightskyblue;
  padding: 20px 10px;
}

h1{
  margin-top: 0px; 
  margin-bottom: 6px 
}

src/components/UserList.jsx

import React from "react";
import UserItem from "./UserItem";
import "./UserList.css";


function UserList(props){
  return(
    <div className="UserList">
      <h2>UserList.jsx</h2>
      {
        props.users.map((user, index)=>{
          return (
            <UserItem  
              name={user.name} 
              email={user.email}
              //"key={index}"" is not a best practice.
              //preferably use index taken from directly from API
              key={index} 
            />
          )

        })
      } 

    </div>  

  )
}


export default UserList;

src/components/UserList.css

.UserList{
  background-color: lightsalmon;
  padding: 10px 10px;
  margin: 10px;
}

src/components/UserItem.jsx

import React from "react";
import "./UserItem.css";

function UserItem(props){
  return(
    <div className="UserItem">
      <h2>UserItem.jsx</h2>
      <div>{props.name}</div>
      <div>{props.email}</div>
    </div>  
    )
}

export default UserItem;

src/components/UserItem.css

.UserItem{
  background-color: lightgreen;
  padding: 10px 10px;
  margin: 10px;
}

03.05 - State & Props - Send User List data through multiple components (class components)

adriangheo — Sat, 12 Nov 2022 07:49:28 +0000

App preview:

Project files:

src/App.js

import React from "react";
import "./App.css";
import UserList from "./components/UserList";

class App extends React.Component{
  constructor(){
  super();
  this.state = {
    users: [],
    newUserName: "",
    newUserEmail: ""
  }
  }

  componentDidMount= () => {
  this.setState({
    users: [
    {
      name: "lulu",
      email: "lulu@gmail.com"
    },
    {
      name: "bubu",
      email: "bubu@hotmail.com"
    }
    ]
  })
  }

  handleNameChange = (event) => {
  this.setState({
    newUserName: event.currentTarget.value
  })
  }

  handleEmailChange = (event) => {
  this.setState({
    newUserEmail: event.currentTarget.value
  })
  }

  handleFormSubmit = (event) => {
  event.preventDefault();

  const newUser = {
    name: this.state.newUserName,
    email: this.state.newUserEmail
  }

  this.updateUsers(newUser);

  console.log(this.state)
  }

  updateUsers = (newUser) => {
  this.setState((prevState)=>({
    users: [
    ...prevState.users,
    newUser
    ]
  }))
  console.log(this.state)
  }



  render(){
    return(
      <div className="App">

        <form onSubmit={(event)=>{this.handleFormSubmit(event)}}>
        <label htmlFor="name">Name: </label>
        <input 
          type="text" 
          name="name" 
          onChange={(event)=>{this.handleNameChange(event)}}
        ></input>

        <label htmlFor="email">Email: </label>
        <input 
          type="mail" 
          name="email" 
          onChange={(event)=>{this.handleEmailChange(event)}}
        ></input>

        <input type="submit" value="Submit Form!"></input>
        </form>

        <h1>App.js</h1>
        <UserList users={this.state.users}/>
      </div>
    )
  }
}

export default App;

src/App.css

.App{
  background-color: lightskyblue;
  padding: 20px 10px;
}

h1{
  margin-top: 0px; 
  margin-bottom: 6px 
}

src/components/UserList.jsx

import React from "react";
import UserItem from "./UserItem";
import "./UserList.css";

class UserList extends React.Component{
  constructor(props){
    super(props);
    this.state = {

    }
  }
  render(){
    return(
      <div className="UserList">
         <h2>UserList.jsx</h2>
         {
          this.props.users.map((user, index)=>{
            return (
              <UserItem  
                name={user.name} 
                email={user.email}
                //"key={index}"" is not a best practice.
                //preferably use value taken from directly from API
                key={index}
              />
            )
          })
        } 

      </div>  

    )
  }
}

export default UserList;

src/components/UserList.css

.UserList{
  background-color: lightsalmon;
  padding: 10px 10px;
  margin: 10px;
}

src/components/UserItem.jsx

import React from "react";
import "./UserItem.css";

class UserItem extends React.Component{
  constructor(props){
    super(props);
    this.state = {

    }
  }

  render(){

    return(
      <div className="UserItem">
          <h2>UserItem.jsx</h2>
          <div>{this.props.name}</div>
          <div>{this.props.email}</div>
      </div>  
    )
  }
}

export default UserItem;

src/components/UserItem.css

.UserItem{
  background-color: lightgreen;
  padding: 10px 10px;
  margin: 10px;
}

03.04 - State & Props - Send counter data through multiple components (functional components)

adriangheo — Fri, 04 Nov 2022 22:29:31 +0000

App preview:

Project files:

src/App.js

import React, {useState} from "react"
import './App.css';
import ParentComponent from './components/ParentComponent';


const App = () => {
  const [count, setCount] = useState(0);

  return(
    <div className="App">
      <h1>App.js</h1>
      <button onClick={()=>{setCount(count+1)}}>Click Me</button>
      <ParentComponent count={count}/>
    </div>
  )
}

export default App;

src/App.css

.App{
  background-color: lightskyblue;
  padding: 20px 10px;
}

h1{
  margin-top: 0px; 
  margin-bottom: 6px 
}

button{
  margin-bottom: 6px; 
}

src/components/ParentComponent.jsx

import React from "react"
import ChildComponent from "./ChildComponent"
import "./ParentComponent.css"

const ParentComponent = (props) => {
    const {count} = props;

    return(
        <div className="ParentComponent">
            <h2>ParentComponent.jsx</h2>
            <ChildComponent count={count}/>
        </div>
    )
}

export default ParentComponent

src/components/ParentComponent.css

.ParentComponent{
    background-color: lightsalmon;
    padding: 10px 10px;
}

h2{
    margin-top: 0px; 
    margin-bottom: 6px 
}

src/components/ChildComponent.jsx

import React from "react";
import "./ChildComponent.css"

const ChildComponent = (props) =>{
    const {count} = props;
    return (
        <div className="ChildComponent">
            <h3>ChildComponent.jsx</h3>
            <p>The value of count is {count}.</p>
        </div>
    );
}

export default ChildComponent;

src/components/ChildComponent.css

.ChildComponent{
    background-color: lightgreen;
    padding: 10px 10px;
}

h3{
    margin-top: 0px; 
    margin-bottom: 6px 
}

03.03 - State & Props - Send counter data through multiple components (class components)

adriangheo — Fri, 04 Nov 2022 22:29:25 +0000

App preview:

Project files:

src/App.js

import React from "react"
import ParentComponent from './components/ParentComponent';
import './App.css';

class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      count: 0,
    }
  }

  handleClick = () => {
    this.setState((prevState)=>({count: prevState.count + 1}))
  }

  render(){
    return(
      <div className="App">
        <h1>App.js</h1>
        <button onClick={()=>{this.handleClick()}}>Click Me</button>
        <ParentComponent count={this.state.count}/>
      </div>

    )
  }
}

export default App;

src/App.css

.App{
  background-color: lightskyblue;
  padding: 20px 10px;
}

h1{
  margin-top: 0px; 
  margin-bottom: 6px 
}

button{
  margin-bottom: 6px; 
}

src/components/ParentComponent.jsx

import React from "react"
import ChildComponent from "./ChildComponent"
import "./ParentComponent.css"

class ParentComponent extends React.Component{
    constructor(props){
        super(props);
    }

    render(){
        const {count} = this.props

        return(
            <div>
                <div className="ParentComponent">
                    <h2>ParentComponent.jsx</h2>
                    <ChildComponent count={count}/>
                </div>

            </div>
        )
    }

}

export default ParentComponent

src/components/ParentComponent.css

.ParentComponent{
    background-color: lightsalmon;
    padding: 10px 10px;
}

h2{
    margin-top: 0px; 
    margin-bottom: 6px 
}

src/components/ChildComponent.jsx

import React from "react";
import "./ChildComponent.css"

class ChildComponent extends React.Component{
    render(){
        const {count} = this.props;

        return (
            <div className="ChildComponent">
                <h3>ChildComponent.jsx</h3>
                <p>The value of count is {count}.</p>
            </div>
        );
    }
}

export default ChildComponent;

src/components/ChildComponent.css

.ChildComponent{
    background-color: lightgreen;
    padding: 10px 10px;
}

h3{
    margin-top: 0px; 
    margin-bottom: 6px 
}

03.02 - State & Props - Send counter data to child component (functional components)

adriangheo — Fri, 04 Nov 2022 22:29:15 +0000

App preview:

Project files:

import React from "react";
import './App.css';
import ParentComponent from "./components/ParentComponent";

function App(){
  return(
    <div className="App">
      <h1>App.js</h1>
      <ParentComponent/>
    </div>
  )
}

export default App;

src/App.css

.App{
  background-color: lightskyblue;
  padding: 15px 10px;
}

h1, h2, h3{
  margin-top: 0px; 
  margin-bottom: 6px;
  padding-top: 0px;
  padding-bottom: 0px;

}

src/components/ParentComponent.jsx

import React, { useState } from "react";
import ChildComponent from "./ChildComponent"
import "./ParentComponent.css"

function ParentComponent(){
    const [counter, handleClick] = useState(0);

    return (
      <div className="ParentComponent">
        <h2>ParentComponent.jsx</h2>
        <button onClick={()=>(handleClick(counter+1))}>Click me</button>
        <br/><br/>
        <ChildComponent count={counter}/>
      </div>
    );
  }

export default ParentComponent;

src/components/ParentComponent.css

.ParentComponent{
    background-color: lightcoral;
    padding: 15px 10px;
  }

src/components/ChildComponent.jsx

import React from "react";
import "./ChildComponent.css"

function ChildComponent(props){
    const {count} = props;

    return(
        <div className="ChildComponent">
            <h3>ChildComponent.jsx</h3>
            <p>The value of count is {count}.</p>
        </div>
    )
}

export default ChildComponent;

src/components/ChildComponent.css

.ChildComponent {
    background-color: lightgreen;
    padding: 15px 10px;
}