祖父母组件未将参数传递给函数

Question

I have some doubts trying to understand how react works with functions as props, passing them around to child components. I already saw some tutorials but didn't grasp my issue at the moment.

Basically I have a simple component that passes a list down, and other component that handles the list with Array.map to render another component.

Basically I have the following:

App.js -> Quotes -> Quote.

And I want to handle the click on the Quote component. So everytime the user clicks Quote I want to handle it on the APP.js.

I already tried to pass the reference as a prop down and in the app.js quotes component to call the function, but it didn't work.

This is what I tried till now:

App.js

import React, { Component } from 'react';
import classes from './App.module.css';

import Quotes from '../components/quotes/quotes'

class App extends Component {
  state = {
    quotes: [
      { id: 1, text: "Hello There 1" },
      { id: 2, text: "Hello There 2" },
      { id: 3, text: "Hello There 3" },
      { id: 4, text: "Hello There 4" }
    ],
    clickedQuote: "none"
  }

  handleClickedQuote (id) {
    console.log(id)
    const quoteIndex = this.state.quotes.findIndex(q => q.id === id)

    this.setState({
      clickedQuote: this.state.quotes[quoteIndex].text
    })
  }

  render() {
    return (
      <div className="App">
        <div className={classes['quotes-wrapper']}>
          <Quotes clicked={this.handleClickedQuote} quotes={this.state.quotes}/>
          <p>clicked quote {this.state.clickedQuote}</p>
        </div>
      </div>
    );
  }
}

export default App;

Quotes.js

import React from 'react';
import Quote from './quote/quote'

const quotes = (props) => props.quotes.map((quote) => {
  return (
    <Quote clicked={props.clicked} text={quote.text}/>
  )
})

export default quotes

Quote.js

import React from 'react';
import classes from './quote.module.css'

const quote = (props) => {
  return (
    <div onClick={() => props.clicked(props.id)} className={classes.quote}>
      <p className={classes['quote-text']}>{props.text}</p>
    </div>
  )
}

export default quote

I need to get the id on the hanleClickedQuote in the App.js function. What am I doing wrong?

Answer 1

You need to explicitly pass the id as a prop. So, in Quotes.js in your map() , something like:

<Quote id={quote.id} clicked={props.clicked} text={quote.text}/>

Update: as @Ashkan said in their answer, you also need to properly bind your handler.

Answer 2

Well there are two things going very wrong in your code. First one is a common problem in JS community. I suggest you read deeper into the usage of the 'this' keyword. in App.js you are defining your method as a function declaration.

handleClickedQuote(id) {
    console.log(id)
    const quoteIndex = this.state.quotes.findIndex(q => q.id === id)

    this.setState({
        clickedQuote: this.state.quotes[quoteIndex].text
    })
}

Now the 'this' keyword in function declarations are dynamically set, meaning 'this' here actually gets set when the function gets called and since it's an event handler, the value of 'this' will actually be your event! You can test it out. But we want 'this' to refer to our class so we can access the state.

There are two ways to fix this, first:

You can bind the correct value for 'this' in the constructor of your App.js class like this (the old way):

constructor(props) {
    super(props);
    this.handleClickedQuote = this.handleClickedQuote.bind(this);
}

This replaces the method in your class with a version that uses the correct 'this' value at the construction step of your object.

Or simpler yet, you can use an arrow function since the 'this' keyword in an arrow function is set lexically:

handleClickedQuote = id => {
    console.log(id);
    const quoteIndex = this.state.quotes.findIndex(q => q.id === id);

    this.setState({
        clickedQuote: this.state.quotes[quoteIndex].text
    });
}

NOTE: In an arrow function the value of 'this' basically refers to whatever is outside of that code block which in this case is your entire object.

Also you have a minor mistake in your code which someone mentioned. You actually forgot to pass the id of the quote as a prop to the Quote component. But that's just a minor oversight. It's important to know this problem has less to do with React than JS itself. My advice is getting a little deeper into JS and learning all the quirks and technicalities of the language. It will save you a lot of hassle in the future. Also work on your debugging skills so mistakes like the missing prop don't fall through the cracks so easily.

Best of luck