React Context vs Props

React Props vs Context

Everyone is building their new apps with React hooks, but you still need to know how props work for older React apps (and let's face it, for simple data transfer directly between a parent and child props will do just fine).
I recently completed the React Hooks training course from Reed Barger where he walks through building a CRUD() to do app using React Hooks instead of Redux. He breaks out the course by functionality, so after this initial post about context and state I'll post my code reviews based on his course chapters.

Index.js:
· Generally the context will contain relevant data (check out the context.js file below)
· Context is used to pass values between components (instead of prop drilling).
· Wrap the components in 'tag.provider value=...' with values you want to pass
· The components wrapped in the TodosContext.Provider tag now have access to the data in context.js below

index.js

import React, { useContext, useReducer } from "react";
import ReactDOM from "react-dom";
import TodosContext from "./context";
import todosReducer from "./reducer";

import TodoList from "./components/TodoList";

import TodoForm from "./components/TodoForm";

const App = () => {
  const initialState = useContext(TodosContext);
  const [state, dispatch] = useReducer(todosReducer, initialState);
  //context is used to pass values between components (instead of prop drilling).
  //wrap the components in 'tag.provider value=...' with values you want to pass
  return (
    <TodosContext.Provider value={{ state, dispatch }}>
      <TodoForm />
      <TodoList />
    </TodosContext.Provider>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));


context.js

import React from 'react';

const TodosContext = React.createContext({
    todos: [
        {id:1, text:'Eat breakfast', complete: false},
        {id:2, text:'Do laundry', complete: false},
        {id:3, text:'Finish project', complete: true},
    ],
    currentTodo: {}
})

export default TodosContext;


Link your website to this page! Copy and paste the URL below:
http://www.cfsnap.com/react/react-context-vs-props/