چگونگی تغییر value یک ابجکت در ارایه ای که در state قرار دارد

یونس قربانی

سلام

کافیه مقادیر درون state رو بریزی تو یه متغییر و چیزی که میخوای رو ویرایش کنی و با استفاده از setState به روز رسانی کنی state رو

مثلا توی مثال زیر روی اسم هر کدوم از حیوانات کلیک کنید مقدارش تغییر پیدا میکنه

import React, { Component } from 'react';
import { render } from 'react-dom';

class StateExample extends Component {
    constructor() {
        super();
        this.state = {
            animals: [
                { id: 1, animalName: 'cat' },
                { id: 2, animalName: 'dog' },
                { id: 3, animalName: 'cow' },
                { id: 4, animalName: 'bird' },
                { id: 5, animalName: 'camel' }
            ]
        };
    }

    handleChange = animal => {
        const allAnimals = this.state.animals;
        allAnimals.map(a => {
            if (a.id === animal.id) {
                a.animalName = 'changed';
            }
        });
        this.setState(allAnimals);
    };

    render() {
        const animals = this.state.animals;
        return (
            <ul>
                {animals.map(animal => (
                    <li onClick={() => this.handleChange(animal)}>
                        {animal.animalName}
                    </li>
                ))}
            </ul>
        );
    }
}

render(<StateExample />, document.getElementById('root'));