Question 74494 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Uncaught TypeError: guess.map is not a function – Reactjs

at Api:

  1. create Array
  2. Render component MyTest and write props
function App() {

    const [guess, setGuess] = useState([
        {number: 1, name: "Maks", age: 27, city: "Krasnodar", partnet: "with wife", phone: +79292648958,country: "Russia"},
        {number: 2, name: "Dmitriy", age: 30, city: "Moscow", partnet: "with wife", phone: +79293647821,country: "Russia"},
        {number: 3, name: "Alexandr", age: 22, city: "Moscow", partnet: "with wife", phone: +79293684794,country: "Russia"},
        {number: 4, name: "Frank", age: 35, city: "Krasnodar", partnet: "with wife", phone: +79299675874,country: "Australia"},
    ]);

return (

     <MyTest guess = {guess}/>
)

}

go to MyTest:

const MyTest = (guess) => {
    console.log(guess)
    return (
        <div className="basic">
            <div className="basic__container">
                <div className="basic__block">
                <div className="basic__title">Список гостей</div>
                    {guess.map(geuss => {
                            return <div>sssss</div>
                        }
                    )}
                </div>
            </div>
        </div>
    );
};

i get fault
MyTest.jsx:

ncaught TypeError: guess.map is not a function
    at MyTest (MyTest.jsx:11:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (
    react-dom.development.js:26466:1)

I think problem is:
guess:
(4) [{…}, {…}, {…}, {…}] [[Prototype]] :
Object

it have to array

Tags:

2

Answers


  1. 0

    Set a default value for props. const MyTest = (guess =[])

    Login or Signup to reply.
  2. 0

    change MyTest to:

    const MyTest = (props) => {
  console.log(props)
  return (
      <div className="basic">
          <div className="basic__container">
              <div className="basic__block">
              <div className="basic__title">Список гостей</div>
                  {props.guess.map(geuss => {
                          return <div>sssss</div>
                      }
                  )}
              </div>
          </div>
      </div>
  );
};

    or :

    const MyTest = ({guess}) => {
  console.log(guess)
  return (
      <div className="basic">
          <div className="basic__container">
              <div className="basic__block">
              <div className="basic__title">Список гостей</div>
                  {guess.map(geuss => {
                          return <div>sssss</div>
                      }
                  )}
              </div>
          </div>
      </div>
  );
};

    input argument of functional componet is an object that contains all props not only one of them .

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search