0

My code works until I try and pass props AND functions to my child component.

import React from 'react';
import './App.css';
  
  
export function Key(props, {newText, setNewText}) {

  const handleClick = () => {
    setNewText(newText + props.value);
  }

  return (
    <button onClick={handleClick}>{props.value}</button>
  );
}

export default Key;

If I remove the props from the export section the code works fine - unfortunately I need to access the data being passed.

Any help appreciated.

kerrigan
  • 15
  • 4
  • You can't really do this. `props` is the first argument, but then you're trying to destructure props from the second argument, and that's not props. If you need `props` and you want to destructure other items from it, accept that param as-is and then destructure it later if desired. Or add `value` to your destructured parameter and remove `props`. – ggorlen Feb 05 '22 at 01:52
  • 1
    @ggorlen This answers my question perfectly! Thank you so much, I was having a nightmare working out what to search. – kerrigan Feb 05 '22 at 01:59
  • No problem, it's sort of confusing because `import React, {useState, useEffect} from "react";` works, but params are different. – ggorlen Feb 05 '22 at 02:01

0 Answers0