what is the correct syntax for the react code-CodePudding

in react i create 2 components parent and child, in the child function am taking the data as a prop from parent component, at the same time am passing the function to parent component.

in the child function I am writing both by using comma (,) but don't know the right syntax for it.

export const Child= (props, {Function}) => {

here I am getting the syntax error. what is the right syntax for get data as prop and pass the function at same time.

anyone helps me please.

code:

export const Child= (props, {Function}) => {

  let toggleClassCheck = props.data? ' active': '';


  const [iconBtnState, setIconBtnState] = useState(false);
  const SidebarIconClick = () =>{
    setIconBtnState(btnState => !btnState);
  }

  const [activeMenu, setActiveMenu] = useState('main');

  function DropdownItem(props) {
    return (      
      <a href="###" className="menu-item" onClick={() => props.goToMenu && setActiveMenu(props.goToMenu)}>
        <span onClick={() => Function(SidebarIconClick(iconBtnState))} className="icon-button">{props.leftIcon}</span>
        <div className='sidemenu_name' >{props.children}</div>
      </a>
    );
  }
 return(
   <>
   </>
)}

parent component

function Parent() {

  const [navBtnState, setNavBtnState] = useState(false);
  const NavToggleBtnClick = () =>{
    setNavBtnState(btnState => !btnState);
  }
  
  const SideButtonClicked = () =>{
    console.log("clicked")
  }

  return (
    <div className='app'>
      <div onClick={NavToggleBtnClick}> Click here </div>
      <Child SidebarMenuClick={SideButtonClicked} data={navBtnState}/>
    </div>
  );
}

export default Parent;

CodePudding user response：

All the props get passed into the Child function component as a single argument props. Here are two ways I would suggest you access that function.

Just use it like your other props:

const Child = (props) => (
  <div onClick={() => props.functionFromParent()}>
    {props.content}
  </div>
);

const Parent = () => {
  const someFunction = () => { console.log('someFunction'); };

  return <Child content="child content" functionFromParent={someFunction} />
};

Use object destructuring to extract the individual props. Destructuring takes the properties of an object, and declares them as individual variables.

const Child = ({content, functionFromParent}) => (
  <div onClick={() => functionFromParent()}>
    {content}
  </div>
);

const Parent = () => {
  const someFunction = () => { console.log('someFunction'); };

  return <Child content="child content" functionFromParent={someFunction} />
};

CodePudding user response：

I order to pass both data as a prop and a function to the child component, you can specifiy them as separate arguments in the child.

Like this =>

export const Child = (props, Function) => {
  // rest of the code stays the same
}

and in the parent component, yo can pass both the data and the function as props like this =>

return (
  <div className='app'>
    <Child data={navBtnState} Function={SideButtonClicked} />
  </div>
);

you can also destructure the props objects:

export const Child = ({ data, Function }) => {
  // rest of the code stays the same
}

I hope this help if i understood correctly