如果两个数组中都出现某些内容，如何比较 React 中的两个数组并更改 className？

Question

I want to compare if a 'track id' appears in both the 'search results' list and the 'playlist list', and change the class name if so.

The following is the function I have written to do so:

onDuplicate() {
if (this.state.searchResults.filter(track => this.state.playlistTracks.includes(track.id))) {
  return "Track-information-added";
} else {
  return "Track-information";
}

}

I then passed this down as a prop to the desired component and called it in the className attribute like so:

alreadyAdded() {
   this.props.onDuplicate();
}

render() {
    return (
        <div className="Track">
            <div className={this.alreadyAdded}>

I then applied different CSS styles to the two class names, but nothing happens?

Answer 1

Call the function inside the className like this:

 class App extends React.Component { constructor(props) { super(props); this.state = { searchResults: [{id: 1}], playlistTracks: [1], } } onDuplicate() { const {searchResults,playlistTracks} = this.state if (searchResults.filter(track => playlistTracks.includes(track.id))) { return "Track-information-added"; } else { return "Track-information"; } } alreadyAdded() { return this.onDuplicate() } render() { return <div className={this.alreadyAdded()}>Duplicates</div>; } } React.render(<App />, document.getElementById('app'));

working link for your code: https://codepen.io/ak2403/pen/YzVKzNY

Happy Coding !!!

Answer 2

You need to call the function alreadyAdded and return the result in this function:

alreadyAdded() {
  return this.props.onDuplicate();
}
...
<div className = {this.alreadyAdded()}>

Answer 3

you forgot the return in your second function although the first one does return a value the second one does nothing with it .

               alreadyAdded() {

                         return this.props.onDuplicate();

                        }

or just call the first function directly this.porps.onDuplicate()