将函数转换为使用react的单个元素

Question

[请告诉我如何将切换功能应用于一个元素而不是全部。此函数向使用“模态”状态的所有元素添加一个类。

在图片上我正在尝试做的事情：

到目前为止是我的代码：

    state = {
        isLoading: true,
        table: [],
        photos: [],
        error: null,
        modal: true
    };

    handleClick = () => {
        this.setState(state => ({ modal: !state.modal}))
    };

    fetchUsers() {
        fetch(`${API_URL}/post/`)
            .then(response => response.json())
            .then(data =>
                this.setState({
                    table: data.results,
                    photos: data.results.photos,
                    isLoading: false,
                })
            )
            .catch(error => this.setState({error, isLoading: false}));
    }
    componentDidMount() {
        this.fetchUsers();
    }

        const {isLoading, table, error, modal} = this.state;
        return (
            <div>
                <div className="news-container">
                    <div className="container">
                        {error ? <p>{error.message}</p> : null}
                        {!isLoading ? (
                            table.map(result => {
                                const {id, title, created_date, text, author, photos} = result;
                                const img = [];
                                for (let i = 0; i < photos.length; i++) {
                                    img.push(<img src={photos[i]} alt=""/>);
                                }
                                return (
                                    <div className={modal ? "news-card" : "news-card news-card-open"} key={id}>
                                        <p className="title">{title}</p>
                                        <span className="news-date">{created_date}</span>
                                        <div className="describe-block">
                                            <pre>Describe: {text}</pre>
                                            <p>{author}</p>
                                        </div>
                                        <button className={modal ? "" : "open"} id={id} onClick={this.handleClick}>Expand</button>
                                    </div>
                                );
                            })
                        ) : (
                            <h3>Loading...</h3>
                        )}
                    </div>
                </div>
            </div>
        );
    }

Answer 1

感谢Babak Yaghoobi，但我使用了从后端发送的数据ID。这是最重要的。新的小问题，当单击另一个“扩展”按钮时，第一次单击将被删除，而在元素之前打开的类将被删除，而第二次单击时，将添加到当前元素的新类删除>

...
 state = {
        isLoading: true,
        table: [],
        photos: [],
        error: null,
        modal: true,
        modalIndex: -1
    };

    handleClick = (id) => {
        this.setState(state => ({ modal: !state.modal, modalIndex: id}))
    };
...
<button className={modal && modalIndex === id ? "" : "open"} id={id} onClick={()=>this.handleClick(result.id)}>Expand</button>
...

Answer 2

    state = {
        isLoading: true,
        table: [],
        photos: [],
        error: null,
        modal: true,
        modalIndex: -1
    };

    handleClick = (index) => {
        this.setState(state => ({ modal: !state.modal, modalIndex: index}))
    };

    fetchUsers() {
        fetch(`${API_URL}/post/`)
            .then(response => response.json())
            .then(data =>
                this.setState({
                    table: data.results,
                    photos: data.results.photos,
                    isLoading: false,
                })
            )
            .catch(error => this.setState({error, isLoading: false}));
    }
    componentDidMount() {
        this.fetchUsers();
    }
    const {isLoading, table, error, modal, modalIndex} = this.state;
    return (
        <div>
            <div className="news-container">
                <div className="container">
                    {error ? <p>{error.message}</p> : null}
                    {!isLoading ? (
                        table.map((result, index) => {
                            const {id, title, created_date, text, author, photos} = result;
                            const img = [];
                            for (let i = 0; i < photos.length; i++) {
                                img.push(<img src={photos[i]} alt=""/>);
                            }
                            return (
                                <div className={modal && modalIndex == index ? "news-card" : "news-card news-card-open"} key={id}>
                                    <p className="title">{title}</p>
                                    <span className="news-date">{created_date}</span>
                                    <div className="describe-block">
                                        <pre>Describe: {text}</pre>
                                        <p>{author}</p>
                                    </div>
                                    <button className={modal && modalIndex == index ? "" : "open"} id={id} onClick={()=>this.handleClick(index)}>Expand</button>
                                </div>
                            );
                        })
                    ) : (
                        <h3>Loading...</h3>
                    )}
                </div>
            </div>
        </div>
    );
}