Matching Memory

rayman244 · June 28, 2021, 4:29pm

hello everyone, I cannot figure out what is wrong with my code. I have backtracked my steps and found that somewhere around step 9-10 my code does not show any output. There were no error codes so I went on to finish the rest of the project. I think I have some sort of syntax error but nothing is showing up.

gist.github.com

https://gist.github.com/codecademydev/f493bf746532b99bc08599d6f0f0b09e

App.js

import './App.css';
import React from 'react';
import { Score } from './features/score/Score.js';
import { Board } from './features/board/Board.js';
// Add import statements below
import {useDispach} from 'react-redux'
import {setBoard} from './features/board/boardSlice'


const App = () => {

This file has been truncated. show original

Board.js

import React from 'react';
import { CardRow } from './cardRow/CardRow.js';
// Add import statements below
import {selectBoard} from './boardSlice'
import{ useSelector } from 'react-redux'
export const Board = () => {
  // Add selected data variable and implement below
  const currentBoard = useSelector(selectBoard)

  const numberOfCards = currentBoard.length;

This file has been truncated. show original

Card.js

import React from 'react';
// Add import statements below

import { useSelector,useDispach } from 'react-redux'
import { selectVisibleIDs,flipCard,selectMatchedIDs,resetCards }  from '../../boardSlice'

let cardLogo = "https://static-assets.codecademy.com/Courses/Learn-Redux/matching-game/codecademy_logo.png";

export const Card = ({ id, contents }) => {
  // Add selected data and dispatch variables below

This file has been truncated. show original

There are more than three files. show original

aedward317 · July 7, 2021, 1:52am

Hello,
Doing a quick scan of your gist I notice that you have

import { useSelector,useDispach } from ‘react-redux’

which has a syntax error it should be useDispatch

I have also just completed step 10 and created a Gist if you want to compare to see what is different as well

gist.github.com

https://gist.github.com/codecademydev/876a600e1618f1a4563ffcc0a4259cac

Board.js

import React from 'react';
import { CardRow } from './cardRow/CardRow.js';
// Add import statements below
import {useSelector} from 'react-redux';
import {selectBoard} from './boardSlice.js';

export const Board = () => {
  // Add selected data variable and implement below
  const currentBoard = useSelector(selectBoard);

This file has been truncated. show original

Card.js

import React from 'react';
// Add import statements below
import {useSelector} from 'react-redux';
import {selectVisibleIDs} from '../../boardSlice.js'


let cardLogo = "https://static-assets.codecademy.com/Courses/Learn-Redux/matching-game/codecademy_logo.png";

export const Card = ({ id, contents }) => {
  // Add selected data and dispatch variables below

This file has been truncated. show original

CardRow.js

import React from 'react';
import { Card } from './card/Card.js';

export const CardRow = ({ cards }) => {
  const content = cards.map(card => 
    <Card 
      key={card.id} 
      id={card.id} 
      contents={card.contents} 
  />)

This file has been truncated. show original

There are more than three files. show original

emileplas3871191930 · November 12, 2021, 8:21am

Did this actually solve the problem for you? I am also at step 10 and nothing is rendering. I compared with the code above and found one mistake, which I corrected, but still nothing.