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.
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 = () => {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;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 belowshow original
There are more than three files. show original
Hello,
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
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);
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 belowshow 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}
/>)show original
There are more than three files. show original
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.
Hi, I’ve been able to complete the project up to line 21. But when I add the line of code
const cardsMatched = useSelector(selectMatchedIDs())
to Score.js, the app crashes with an “Uncaught TypeError: state is undefined” error. Any clues on what might be going on?
Your useSelector call looks weird to me because you’re passing it a function invocation.import { selectMatchedIDs } from '{yourSlice}';
Yeah, I figured it out a second ago. Thanks! (I was confusing action creators with selectors)