Javascript - React.js - how can i pass a state variable + a function defined in a component, to components deep inside map functions

meanape
June 25, 2023
254 views
1 vote
2 Answers

i have here a component,

const ParentComponent = () => {
  const [state, setState] = useState();
  const toggleState = (id) => {
    setState(); //setting some stuff
  };

  const list = data.map((datas) => (
    <ComponentOne>
      {datas.children === undefined ? (
        <ComponentTwo>Not Found</ComponentTwo>
      ) : (
        datas.children.map((datasTwo) => (
          <ComponentTwo state={state} toggleState={toggleState}>
            Found
          </ComponentTwo>
        ))
      )}
    </ComponentOne>
  ));

  return <>{list}</>;
};

in that component im returning a variable that consist of a <ComponentOne /> that im looping through with the map function
inside of that <ComponentOne /> i also have a ternary to check if something is defined or not,
if its defined, i am going to map another component, which is <ComponentTwo />
in <ComponentTwo /> i have props defined for state and toggleState from <ParentComponent />

if i then run the code, there will be an Uncaught runtime errors: ERROR playButtonState is undefined

But, if i do only one map like this,

const ParentComponent = () => {
  const [state, setState] = useState();
  const toggleState = (id) => {
    setState(); //setting some stuff
  };

  const list = data.map((datas) => (
    <ComponentTwo state={state} toggleState={toggleState}>
     found
    </ComponentTwo>
  ));

  return <>{list}</>;
};

no ones throwing me an error, thoughts?

Answers

- SeyMi
- June 24, 2023 at 1:42 pm
- 0 votes
0
Actually your question doesn’t provide enough information about your problem, but it seems that inside of your ComponentTwo component, you’re assigning the state prop to a variable called playButtonState and you’re using it somewhere that causes the undefined error.
Based on that assumption, when the datas.children === undefined condition is true, you are returning the <ComponentTwo>Not Found</ComponentTwo>, so the value of state prop is undefined and you get the error, so you should take a look at the ComponentTwo component and add a couple of if statements or something else to control the situation that the playButtonState is undefined

Login or Signup to reply.

- VinayChauhan
- June 25, 2023 at 2:31 pm
- 0 votes
0
The reason you are getting the error "playButtonState is undefined" is because you are passing the state and toggleState props to the ComponentTwo component inside a nested map function. This means that the state and toggleState props are not being passed down to all instances of ComponentTwo, only to the instances that are directly inside the inner map function.

To fix this error, you need to pass the state and toggleState props down to all instances of ComponentTwo. One way to do this is to move the inner map function into a separate component that receives the state and toggleState props as props, and then map over the children inside that component. This way, the props will be passed down to all instances of ComponentTwo.

Here’s an example of how the code could look like:
```
const ParentComponent = () => {
const [state, setState] = useState();
const toggleState = (id) => {
    setState(); //setting some stuff
};

const list = data.map((datas) => (
    <ComponentOne>
    {datas.children === undefined ? (
        <ComponentTwo>Not Found</ComponentTwo>
    ) : (
        <ComponentTwoList
        state={state}
        toggleState={toggleState}
        children={datas.children}
        />
    )}
    </ComponentOne>
));

return <>{list}</>;
};

const ComponentTwoList = ({ state, toggleState, children }) => {
return children.map((datasTwo) => (
    <ComponentTwo state={state} toggleState={toggleState}>Found</ComponentTwo>
));
};

export default ParentComponent;
```
In this updated code, the ComponentTwoList component receives the state, toggleState, and children props, and maps over the children props to render the ComponentTwo component with the props passed down to all instances of ComponentTwo.
Login or Signup to reply.