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

Reactjs – error in react child by udsing array in map function

i am trying to start coding a calculator in react by nextjs and tailwind, but in first step i got a problem .

this is main page code:

import Screen from './component/Screen'
import Wrapper from './component/wrapper'
import ButtonBox from './component/buttonBox'
import Button from './component/button'
const btnValues=[
  ["C","+-","%","/"],
  [7,8,9,"*"],
  [4,5,6,"-"],
  [1,2,3,"+"],
  [0,".","="],
]
console.log(btnValues);
export default function Home() {

  return (
    <Wrapper>
     <Screen />
      <ButtonBox> 
        {btnValues.flat().map((btn,i)=>{ return (
          <Button value={btn} key={i}/>)}
        )}
      </ButtonBox>
    </Wrapper>
  )
}

as it is a array i try to use map , but i face a error which is:

"Internal error: Error: Objects are not valid as a React child (found: object with keys {value}). If you meant to render a collection of children, use an array instead."

and also this is the ButtonBox content:

const buttonBox = ({children}) => {
  return (
    <div className='mt-16'>
      {children}
    </div>
  )
}

export default buttonBox

Wrapper is also the same as ButtonBox

i do not know what it means by using array when i already used!

Tags:

2

Answers


  1. 0

    It seems like you are trying to render an object with keys as React children. React does not allow you to render objects directly. Instead, you should render an array of components or a single component.

    Based on your code, you should change the ButtonBox component to accept an array of buttons and then render each button in the array. Here’s an example of how you can do this:

    import React from 'react';

const buttonBox = ({ buttons }) => {
  return (
    <div className='mt-16'>
      {buttons.map((button, i) => (
        <Button key={i} value={button.value} />
      ))}
    </div>
  );
};

export default buttonBox;

    Then, in your Home component, you should pass the btnValues array to the ButtonBox component:

    import React from 'react';
import Screen from './component/Screen';
import Wrapper from './component/wrapper';
import ButtonBox from './component/buttonBox';
import Button from './component/button';

const btnValues = [
  ["C", "+-", "%", "/"],
  [7, 8, 9, "*"],
  [4, 5, 6, "-"],
  [1, 2, 3, "+"],
  [0, ".","="],
];

console.log(btnValues);

export default function Home() {

  return (
    <Wrapper>
     <Screen />
      <ButtonBox buttons={btnValues} />
    </Wrapper>
  );
}

    This will resolve the error you are facing.

    Login or Signup to reply.
  2. 0

    Hey I have a couple of observations, regarding your code and a possible solution:

    • Not sure what button.value is? What are you expecting to return? value does not exist in button, button is actually an array as well, if you want the values inside, you need to traverse the array again.

    • You are going to get an error with that component sooner or later, not sure which version of react are you using, but need to start with Capital Letter, and cammel case. So it is "const ButtonBox" Check this here: ReactJS component names must begin with capital letters?

    • The flat declaration is wrong, it should be btnValues.map((btn,i) => { return (…)}).flat, but still that’s not going to help you in this particular case, so going back to my first question, what output are you expecting?

    • About the child Problem, what is sugested for A_mohii is the recommendable solution, however you can trick React, by declaring a constant with a pointer function and then call it in between your return{}

    Anyways I did a full codesandbox, check if that’s what you need, check this link

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

Back To Top
Search