Как изменить состояние определенного объекта в списке React?

Question

[acorn]

Привет!
как повесить toggle (close/open) при клике на кнопку, так чтобы открывался только нужный элемент списка для редактирования?
вот мой код :
Родительский компонент Customers.js
есть state при клике они меняются

class Customers extends Component{
    constructor() {
        super();
        this.state = {
            customers: sampleCustomers,
            openCL: false,
            className: 'opened'
        };
        this.openClose= this.openClose.bind(this);
        this.addCustomers = this.addCustomers.bind(this);
  
openClose(key){
        const customers = {...this.state.customers};
       
 this.setState({ openCL: !this.state.openCL});
        const className = this.state.openCL ? 'opened ': "closed";

        this.setState({
            customers: customers,
            className: className });

    }

    render(){
        const { customers }=this.state ;
        return(
            <div className="product-block ">
                <h3>List of customers</h3>
                <div className="product-table-block ">
                    <table>
                        <thead>
                        </thead>
                       <tbody>
                        {
                            Object
                            .keys(customers)
                            .map(key => <Customer key={key} details={ customers[key] } />)
                        }
                        </tbody>
                    </table>
                </div>

                <ListCustomers
                    addCustomers={this.addCustomers}
                    className={this.state.className}
                    openClose={this.openClose}
                    />
            </div>

Дочерний компонент ListCustomers.js
Передаю через props state родительского компонента.
При клике на кнопку открываются все таблицы для редактирования и ,собственно, закрываются все при повторном клике на кнопку.
А я хочу чтобы открывалась та таблица, на кнопку которой нажал {key}

class  ListCustomers extends Component{
  constructor(){
      super();
   }
    renderList(key){
      const customer = this.props.customers[key];
      const className = this.props.className;
        return(
            <div>
                <button onClick={()=>this.props.openClose(key)}>Edit id{customer.id}</button> 
                <div className={className} key={key}>
                      <input name="id"
                           value={customer.id}
                           placeholder="Id"
                           onChange={(e)=>{this.handlerChanges(e,key)}}
                           type="text" />
            ......код......              
         </div>
</div>

Answer 1

[Максим]

В общем случае вам нужно либо содержать в стейте состояния каждого из этих объектов, либо сделать каждый элемент списка отдельным компонентом (компонент то будет один и тот же, просто рисоваться будет с разными данными, следовательно и state будет отдельный у каждого, а класс как я вижу вы уже умеете менять). Мне больше нравится второй вариант, так как при нем у вас в списке будет перерисовываться только маленький кусочек, а не весь список целиком.

Взаимодействовать с родителем можно через функции в props.

Comments

[acorn]

спасибо! а можно пример 2 варианта? в принципе, у меня как раз и есть общий компонент Customer и есть обработчик редактирования для каждого из них, но там сделано через [e.target.name]:e.targer.value. а тут надо поменять через state каждого из них.и вот не совсем понимаю как?
А, то есть в самом компоненте Customer я прописываю стейты или передаю через props?

[Максим]

acorn, да, в Customer прописываете стейт (флаг: открыто/закрыто), по клику изменяете.

[Максим]

acorn, [e.target.name]:e.target.value. такая запись вам понятна?

[Максим]

acorn,

...
constructor(props) {
    super(props)
    this.state = {
      data: [],
      isOpen: false,
    }
  }
  onClickHandler() {
    this.setState({ isOpen: !this.state.isOpen })
  }
...