CODEWITHSUNDEEP
javascriptreactjs
Uriel Libano
Uriel Libano

Reputation: 55

ReactJS props coming as 'undefined' from router.js

I have this routes.js file, with props from App.js, and i'm passing these 4 props to the Board component. When I do a console.log or a alert in one of this props inside the route.js, it works perfectly, but It comes undefined in my Board component.

This is just a hangman game.

route.js

import React from "react";
import Board from "./components/Board";
import { BrowserRouter, Switch, Route } from "react-router-dom";

const Routes = ({ buttons, hangman, tipImage, objectiveWord }) => (
    <BrowserRouter>
      <Switch>
        <Route
          path="/"
          buttons={buttons}
          hangman={hangman}
          tipImage={tipImage}
          objectiveWord={objectiveWord}
          component={Board}
        />
      </Switch>
    </BrowserRouter>
);

export default Routes;

/components/Board/index.js

import React, { useState } from "react";
import "./index.scss";
import TiedMan from "../TiedMan";
import RightWrongCounter from "../RightWrongCounters";

const Board = ({ objectiveWord, buttons, hangman, tipImage }) => {

  const [letterClicked, setLetterClicked] = useState([]);
  let rightLettersCount = 0;
  let wrongLettersCount = 0;

  for (let i = 0; i < letterClicked.length; i++) {
        if (!objectiveWord.includes(letterClicked[i])) {
[...]

App.js

import "./App.scss";
import Board from "./components/Board";
import Routes from './routes';
import { BrowserRouter as Router } from 'react-router-dom';

function App() {
  const palavras = ["sing", "dance", "talk", "watch", "walk"];

  const images = [
    "https://mk0musicgrotto1kyale.kinstacdn.com/wp-content/uploads/2018/05/singing-woman-black-dress-smoke-bg-header.jpg",
    "https://img.freepik.com/free-photo/full-length-portrait-jumping-white-girls-expressing-happy-emotions-portrait-best-friends-funny-dancing-together_197531-10953.jpg?size=626&ext=jpg&ga=GA1.2.862581661.1615161600",
    "https://post.healthline.com/wp-content/uploads/2020/12/Female_Friends_Talking_Coffee_732x549-thumbnail-732x549.jpg",
    "https://media-cldnry.s-nbcnews.com/image/upload/newscms/2019_30/2946851/190725-watching-tv-al-1056-2946851.jpg",
    "https://www.gannett-cdn.com/media/2020/04/20/USATODAY/usatsports/gettyimages-104732257.jpg?width=2560",
  ];

  const objectiveIndex = Math.floor(Math.random() * palavras.length);

  const objective = palavras[objectiveIndex].toUpperCase().split("");

  const tipImage = images[objectiveIndex];

  const hangman = [
    "https://4.bp.blogspot.com/-psq1cvp8ZqA/V1S9Jxrju4I/AAAAAAAAA_4/VGZ7GeSGWaY1UQY0WpENjBUnE621fJVPACLcB/s200/forca0.png",
    "https://3.bp.blogspot.com/-G70a1KHVTs0/V1S9J0BgL9I/AAAAAAAAA_w/ND8WKk6ffeIA3k9ii1bTfyp-HlOK_4I6QCLcB/s200/forca1.png",
    "https://1.bp.blogspot.com/-RB6o0ECFMQU/V1S9J1YE1-I/AAAAAAAAA_0/Zod7jdOPLg4nxihqX8DyQoLTLqr1EUS1QCLcB/s200/forca2.png",
    "https://1.bp.blogspot.com/-_8-j5ol9Fvg/V1S9Kb1_1cI/AAAAAAAABAA/ywK-WN8MYZQTAA9LXUfcoFAEFL3OHdLfQCLcB/s200/forca3.png",
    "https://2.bp.blogspot.com/-dTFL3jVSS5Q/V1S9KQRuuxI/AAAAAAAABAE/hDo6y6m01tMJ0QmwEeEQyi0CNdxP9HeGwCLcB/s200/forca4.png",
    "https://3.bp.blogspot.com/-1HoOX4Aze8c/V1S9KiHxpyI/AAAAAAAABAQ/pcnHKw0UbwAKdcaMl6xfkD6ohNLJQnzowCLcB/s200/forca5.png",
    "https://2.bp.blogspot.com/-AJjWekfS3nQ/V1S9KlnvFMI/AAAAAAAABAM/978o9oBROYoOm4tPJTDk5Zb8hxmN6sqYgCLcB/s200/forca6.png",
  ];

  const buttons = [
    "A",
    "B",
    "C",
    "D",
    "E",
    "F",
    "G",
    "H",
    "I",
    "J",
    "K",
    "L",
    "M",
    "N",
    "O",
    "P",
    "Q",
    "R",
    "S",
    "T",
    "U",
    "V",
    "W",
    "X",
    "Y",
    "Z",
  ];

  return (
    <div className="App">
      <div className="container-board">
     
          <Routes buttons={buttons} hangman={hangman} tipImage={tipImage} objectiveWord={objective}/>
        {/* <Board buttons={buttons} hangman={hangman} tipImage={tipImage} objectiveWord={objective} /> */}
       
      </div>
    </div>
  );
}

export default App;

Upvotes: 0

Views: 44

Answers (1)

Shyam
Shyam

Reputation: 5497

Route is the component provided by 'react-router-dom' you should not pass your own custom props into it .

If you need to pass additional props to your component rendered via Route then you can use the render prop of the Route Component.

const Routes = ({ buttons, hangman, tipImage, objectiveWord }) => (
  <BrowserRouter>
    <Switch>
      <Route
        path="/"
        render={(props) => (
          <Board
            buttons={buttons}
            hangman={hangman}
            tipImage={tipImage}
            objectiveWord={objectiveWord}
            {...props}
          />
        )}
      />
    </Switch>
  </BrowserRouter>
);

Upvotes: 1

Related Questions