如何在反应中仅渲染一个生成的孩子的孩子组件

Question

In a React app, I have a component to display the results of a search called ResultsContainer. I am generating children by mapping a prop that has been passed down from a parent and creating a list element from each item in the array. Each of these children has a component that I (DetailsContainer) want to render when a button is clicked, and ONLY for the child that had the button clicked. As of now, the component renders for all of these children. I am not sure how to target the individual child so that the component only renders for that specific one.

ResultsContainer:

var React = require('react');
var DetailsContainer = require('./DetailsContainer.jsx');

var ResultsContainer = React.createClass ({
  render: function () {
    var queryType = this.props.queryType;
    var details = this.props.details;
    var that = this;

    if (this.props.results == null) {
      var searchResult = "Enter search terms"
    } else {
      var searchResult = this.props.results.map(function(result, index){
      //if artist search
        if (queryType == "artist") {
         if (result.type == "artist") {
           return <li className="collection-item" key={index}> {result.title} <button onClick={that.props.handleDetailClick}>Get details</button> <DetailsContainer details={details} /> </li> ;
         }
        }
      });
    };

    return (
      <div className="collection">
        {searchResult}
      </div>
    );
  },
});

module.exports = ResultsContainer;

When the button is clicked, I want to render the DetailsContainer component for that child ONLY, not all of them. How could I do this?

DetailsContainer:

var React = require('react');

var DetailsContainer = React.createClass({

  render: function(){
    if (this.props.details !== null) {
      var detailsDisplay = "deets"
    }
    return (
        <div className="detailsDisplay">
          {detailsDisplay}
        </div>
      );
  },

});

module.exports = DetailsContainer;

Here is handleDetailClick a function being passed down from the parent as a prop:

handleDetailClick: function() {
    this.setState({details: "details"});
},

Also, in ResultsContainer, I could not figure out how to use .bind() to be able to use this.props.handleDetailClick from inside the callback of the .map, so i just created a variable "that" and set it equal to "this" outside the function. Is this bad practice? What is the proper way to do it using .bind()? Thanks so much.

Answer 1

First off map has an option to pass this. map(function(item){}, this); You have at least two options to limit the list. One is to use state like so;

 render() { let useList; if (this.state.oneSelected) useList = this.props.list[this.state.oneSelected]; else useList = this.props.list; let useListing = useList.map(function(item){}, this); return ({useListing}) } 

The other option is to pass the selected item to the parent this.props.selectOne(item.id) and have the parent return just the one item as a list.