我想在地图功能中创建一个单独的过程，比如点击切换

Question

i want to make a button toggle on each div i click in map function but the buttons toggle in whole dives on one click (i want to make each click toggle abutton on only the div that i clicked not all of them) ...................................................................................................

import React,{Component}  from 'react'
import './course.css'
import Downloadcourse from './../download/down.js'
import {Transition,animated} from 'react-spring/renderprops'

class Course extends Component{
    constructor(){
        super();
        this.state={
            search:'',
            showcomponent:false,
        };
        
    }
    updatesearch=(e)=>{
        this.setState({search:e.target.value.substr(0,20)});
    }
    
    downtoggle=(index)=>{
        
        this.setState({showcomponent:!this.state.showcomponent})
    }
  render(){
      let filteredcontacts= this.props.corses.filter(
      (item)=>{
          return item.name.toLowerCase().indexOf(
              this.state.search.toLowerCase()) !== -1 ;
          
      }) ;
      let length= this.props.corses.length;
      const courselist=length ?(
       filteredcontacts.map((item,index)=>{
         return (
       <div className="col-sm-3 cat" key={item.id}>
       <div className="maincover" >
      <div className="mainimg" onClick={this.downtoggle}>
      </div>
      <div className="maincorse">
      <div className="row course-title">
      <h1 className="course-Name">{item.name}</h1> 
      </div>
      <div className="row course-title">
      <button className="removeing" onClick={()=>{this.props.deleteing(index)}}>Remove 
      Course</button>
      </div>
      <div className="row download">
      <Transition
        native
         items={this.state.showcomponent}
          from={{ position: 'absolute', overflow: 'hidden', height: 0 }}
            enter={[{ height: 'auto' }]}
            leave={{ height: 0 }}>
            {show=>show &&(props=>(
            <animated.div style={props}>
                <Downloadcourse />          
            </animated.div>               
                           ))}
      </Transition>
      </div>
      </div>
       </div>
       </div> 
  )}
      )) :(
          <div className="no-content">
          <h2>no content to show</h2>
          </div>
         )
      return(

    <div className="course">
      <input type="text" className="input-search" onChange={this.updatesearch}/>
      <span className="magnficant"> &#128269;</span>
    <div  className="row category">
     {courselist}
</div>
    </div>
  )
}
}

export default Course;
                        
                        

Answer 1

To make multiple elements toggleable you need to store each element's toggled state in some data structure. A javascript object ( {} ) comes in handy for this.

1. Convert this.state.showComponent from boolean to object

    this.state={ search: '', showComponent: {}, };

2. Use the index passed to toggle handler to update toggled state

    downtoggle = (index) => { this.setState(prevState => ({ showComponent: { ...prevState.showComponent, // <-- spread existing state [index]: !prevState.showComponent[index], // <-- toggle value }, })); }

3. Ensure index is passed to the toggle handler

    onClick={() => this.downtoggle(index)}

4. Check the toggled state for the transition component

    <Transition // ... other props items={this.state.showComponent[index]} // <-- truthy/falsey />