How to handle 2D array with using Context in React?

Question

This is where I created Context

import { createContext } from "react";

const GridContext = createContext([]);

export default GridContext;

this is How I am sending data using context.

const App = () => {
  const [grid, setGrid] = useState([]);
  useEffect(() => {
    const newGrid = getInitialGrid();
    setGrid(newGrid);
  }, []);
.....
if (grid.length === 0) {
    return (
      <GridContext.Provider value={grid}>
        <div className="App">
          <nav className="navbar">
            <div>
              <h1>Pathfinder Visualizer</h1>
            </div>
          </nav>
          <Info />
          <Arena />
        </div>
      </GridContext.Provider>
    );
  } else {
    return (
      <GridContext.Provider value={grid}>
        <div className="App">
          <nav className="navbar">
            <div>
              <h1>Pathfinder Visualizer</h1>
            </div>
            <div className="navitem">
              <button className="btn" onClick={() => dijkstra()}>
                <span>Visualize</span>
              </button>
            </div>
          </nav>
          <Info />
          <Arena />
        </div>
      </GridContext.Provider>

This is where I need the 2d array.

const Arena = () => {
  const [grid, setGrid] = useContext(GridContext);
  const [mouseIsPressed, setmouseIsPressed] = useState(false);
  const [flag, setFlag] = useState(false);
  const [start, setStart] = useState([5, 5]);
....
console.log(GridContext._currentValue);
  //setGrid(GridContext._currentValue);
  console.log(grid);
  return <div></div>;

The output of first logger is 2d array while the output of second array is only the first row of 2d array. Also the setGrid is giving error.

Shubham Khatri · Accepted Answer · 2020-05-12 10:29:08Z

1

You are updating the grid with useEffect post the initial render so its expected that initially the grid from context will give your only the empty row.

Also you are just passing grid to the context and not setGrid which is why its undefined and also if you destrutcutre in child you are actually destructuing the first and second row of grid.

Pass context value like an array and it will work

Also you can improve on your code by adding conditional render where you actually need it

const App = () => {
  const [grid, setGrid] = useState([]);
  useEffect(() => {
    const newGrid = getInitialGrid();
    setGrid(newGrid);
  }, []);
.....
  return (
      <GridContext.Provider value={[grid, setGrid]}>
        <div className="App">
          <nav className="navbar">
            <div>
              <h1>Pathfinder Visualizer</h1>
            </div>
             {grid.length > 0 && <div className="navitem">
              <button className="btn" onClick={() => dijkstra()}>
                <span>Visualize</span>
              </button>
            </div>}
          </nav>
          <Info />
          <Arena />
        </div>
      </GridContext.Provider>
    );
 }

answered May 12, 2020 at 10:29

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sanket Manmode Over a year ago

It worked. Thanks. I didn't knew about passing setter also. Can you share me a good resource to learn about context.

Shubham Khatri Over a year ago

react docs are great. Please refer reactjs.org/docs/context.html#contextprovider and reactjs.org/docs/hooks-reference.html#usecontext

Sanket Manmode Over a year ago

Thank you very much

Collectives™ on Stack Overflow

How to handle 2D array with using Context in React?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related