ReactJs , my card component is not rendering why?

1

My code sandbox.

I am trying add a simple card component inside the container component (Black border) when the gambit button is clicked. It is not rendering inside the container, but it is getting updated inside the state property gambits.

Untitled
Untitled1440×900 96.7 KB

Thanks. :grinning: :grinning:

2

Do you have a link to the lesson?
Also some actually code and not a screenshot would be helpfully here

3

Yes i will post my code here

My full code is here : https://codesandbox.io/s/gambit-hello-tar-n0eox?file=/src/components/gambit/Container.jsx:0-735

I think there is some problem in my container component (not damn sure)

Container Component

import React, { useContext } from "react";

import GambitContext from "../../context/gambitContext";
import Card from "./Card";

const Container = () => {
  const gambitContext = useContext(GambitContext);
  const { gambits } = gambitContext;
  return (
    <div style={styles}>
      {gambits.length > 0 &&
        Object.keys(gambits).map(key => {
          const { top, left, id, title } = gambits[key];
          return (
            <Card key={key} id={id} top={top} left={left}>
              {title}
            </Card>
          );
        })}
    </div>
  );
};

const styles = {
  width: "100%",
  height: 600,
  marginTop: "20px",
  border: "1px solid black"
};
export default Container;

Card Component

import React, { Fragment } from "react";

const Card = ({ id, top, left, children }) => {
  return (
    <Fragment>
      <div className="row" style={{ position: "absolute", zIndex: "-9" }}>
        <div className="col s12 m5">
          <div className="card-panel teal">
            <span className="white-text">
              {" "}
              {children}
              {id} I am a very simple card. I am good at containing small bits
              of information. {top} {left}
            </span>
          </div>
        </div>
      </div>
    </Fragment>
  );
};

export default Card;

Gambtt Create Component here:

import React, { Fragment, useContext } from "react";
import GambitContext from "../../context/gambitContext";
import Container from "./Container";
let globalID = 0;
const CreateGambit = () => {
  const gambitContext = useContext(GambitContext);
  const { addGambit } = gambitContext;

  const addGambitCard = id => {
    addGambit(id);
  };

  return (
    <Fragment>
      <button
        className="btn waves-effect waves-light"
        type="submit"
        name="action"
        style={{ marginTop: "15px" }}
        onClick={() => addGambitCard(globalID++)}
      >
        Gambit <i className="fas fa-plus" />
      </button>
      <Container />
    </Fragment>
  );
};

export default CreateGambit;
// Read react decorators

Context

//Context
import { createContext } from "react";

const gambitContext = createContext();

//Reducer
import { ADD_GAMBIT } from "../types";
export default (state, action) => {
  switch (action.type) {
    case ADD_GAMBIT:
      return {
        ...state,
        gambits: { ...state.gambits, ...action.payload }
      };
    default:
      return state;
  }
};

// State
import React, { useReducer } from "react";

import { ADD_GAMBIT } from "../types";

import GambitContext from "./gambitContext";
import GambitReducer from "./gambitReducer";

const GambitState = props => {
  const intitalState = {
    gambits: {}
  };

  const [state, dispatch] = useReducer(GambitReducer, intitalState);

  //Add gambit to space
  const addGambit = id => {
    // const uuid = id;
    const gambitData = {
      [id]: { top: 20, left: 180, title: `Card G_${id}` }
    };
    return dispatch({ type: ADD_GAMBIT, payload: gambitData });
  };
  return (
    <GambitContext.Provider value={{ gambits: state.gambits, addGambit }}>
      {props.children}
    </GambitContext.Provider>
  );
};
export default GambitState;
4

I solved this problem by changing my code in container component as below

gambits.length
to
Object.keys(gambits).length