How to use props in helper functions in React

Question

I want to use the data from props in the helper function as a parameter.

However, I still can't do it, I tried directly

const SuperHero = (props) => {
  const [hero, setHero] = useState("");

  const searchSuperHero = (props.name) => {}

Also using destructuring props

const SuperHero = (props) => {
  const [hero, setHero] = useState("");
  const {name} = props.name;

  const searchSuperHero = (name) => {}

But I still can't capture the data and it shows the variable as declared but never used even though it is used right in the function below.

Please, Where is problem?

Thank you

You need to call the helper function passing the parameter, e.g: searchSuperHero(props.name) make sure the name is coming in the props — Mathiasfc
– Mathiasfc, Commented Feb 15, 2022 at 20:00

crevulus · Accepted Answer · 2022-02-15 20:02:49Z

1

Both of your code blocks are incorrect for the same reason: defining argument parameters.

const SuperHero = (props) => {
  const [hero, setHero] = useState("");

  const searchSuperHero = (props.name) => {} // you're trying to define a parameter called props.name for your new function

Try this:

const SuperHero = (props) => {
  const [hero, setHero] = useState("");

  const searchSuperHero = () => {
    console.log(props.name);
  } 
}

Also, it's unrelated to your question, but the correct syntax for destructuring an object is:

const { name } = props;

destructuring plucks out the chosen value so you don't need to use .

answered Feb 15, 2022 at 20:02

crevulus

2,5043 gold badges25 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use props in helper functions in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related