Пожалуйста, скажите мне, как применить функцию переключения к одному элементу, а не ко всем. Эта функция добавляет класс ко всем элементам, где используется «модальное» состояние.

На картинке вот что я пытаюсь сделать:

введите описание изображения здесь

Вот мой код до сих пор:

state = { isLoading: true, table: [], photos: [], error: null, modal: true }; handleClick = () ={amp}gt; { this.setState(state ={amp}gt; ({ modal: !state.modal})) }; fetchUsers() { fetch(`${API_URL}/post/`) .then(response ={amp}gt; response.json()) .then(data ={amp}gt; this.setState({ table: data.results, photos: data.results.photos, isLoading: false, }) ) .catch(error ={amp}gt; this.setState({error, isLoading: false})); } componentDidMount() { this.fetchUsers(); } const {isLoading, table, error, modal} = this.state; return ( {amp}lt;div{amp}gt; {amp}lt;div className="news-container"{amp}gt; {amp}lt;div className="container"{amp}gt; {error ? {amp}lt;p{amp}gt;{error.message}{amp}lt;/p{amp}gt; : null} {!isLoading ? ( table.map(result ={amp}gt; { const {id, title, created_date, text, author, photos} = result; const img = []; for (let i = 0; i {amp}lt; photos.length; i  ) { img.push({amp}lt;img src={photos[i]} alt="javascript - переключить функцию на один элемент, используя реагировать"/{amp}gt;); } return ( {amp}lt;div className={modal ? "news-card" : "news-card news-card-open"} key={id}{amp}gt; {amp}lt;p className="title"{amp}gt;{title}{amp}lt;/p{amp}gt; {amp}lt;span className="news-date"{amp}gt;{created_date}{amp}lt;/span{amp}gt; {amp}lt;div className="describe-block"{amp}gt; {amp}lt;pre{amp}gt;Describe: {text}{amp}lt;/pre{amp}gt; {amp}lt;p{amp}gt;{author}{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;button className={modal ? "" : "open"} id={id} onClick={this.handleClick}{amp}gt;Expand{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; ); }) ) : ( {amp}lt;h3{amp}gt;Loading...{amp}lt;/h3{amp}gt; )} {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; ); } 

Евгений Батенко

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,

Спасибо за Babak Yaghoobi, но я использовал идентификатор данных, отправленный с бэкэнда. И это работа всего. Новая небольшая проблема, когда при щелчке на другой «раскрывающийся» первый щелчок будет удален класс, открытый перед элементом, а затем при втором щелчке добавить новый класс к текущему элементу.

 ... state = { isLoading: true, table: [], photos: [], error: null, modal: true, modalIndex: -1 }; handleClick = (id) ={amp}gt; { this.setState(state ={amp}gt; ({ modal: !state.modal, modalIndex: id})) }; ... {amp}lt;button className={modal {amp}amp;{amp}amp; modalIndex === id ? "" : "open"} id={id} onClick={()={amp}gt;this.handleClick(result.id)}{amp}gt;Expand{amp}lt;/button{amp}gt; ... 
Евгений Батенко

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,

  state = { isLoading: true, table: [], photos: [], error: null, modal: true, modalIndex: -1 }; handleClick = (index) ={amp}gt; { this.setState(state ={amp}gt; ({ modal: !state.modal, modalIndex: index})) }; fetchUsers() { fetch(`${API_URL}/post/`) .then(response ={amp}gt; response.json()) .then(data ={amp}gt; this.setState({ table: data.results, photos: data.results.photos, isLoading: false, }) ) .catch(error ={amp}gt; this.setState({error, isLoading: false})); } componentDidMount() { this.fetchUsers(); } const {isLoading, table, error, modal, modalIndex} = this.state; return ( {amp}lt;div{amp}gt; {amp}lt;div className="news-container"{amp}gt; {amp}lt;div className="container"{amp}gt; {error ? {amp}lt;p{amp}gt;{error.message}{amp}lt;/p{amp}gt; : null} {!isLoading ? ( table.map((result, index) ={amp}gt; { const {id, title, created_date, text, author, photos} = result; const img = []; for (let i = 0; i {amp}lt; photos.length; i  ) { img.push({amp}lt;img src={photos[i]} alt="javascript - переключить функцию на один элемент, используя реагировать"/{amp}gt;); } return ( {amp}lt;div className={modal {amp}amp;{amp}amp; modalIndex == index ? "news-card" : "news-card news-card-open"} key={id}{amp}gt; {amp}lt;p className="title"{amp}gt;{title}{amp}lt;/p{amp}gt; {amp}lt;span className="news-date"{amp}gt;{created_date}{amp}lt;/span{amp}gt; {amp}lt;div className="describe-block"{amp}gt; {amp}lt;pre{amp}gt;Describe: {text}{amp}lt;/pre{amp}gt; {amp}lt;p{amp}gt;{author}{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;button className={modal {amp}amp;{amp}amp; modalIndex == index ? "" : "open"} id={id} onClick={()={amp}gt;this.handleClick(index)}{amp}gt;Expand{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; ); }) ) : ( {amp}lt;h3{amp}gt;Loading...{amp}lt;/h3{amp}gt; )} {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; ); } 
Бабак Ягхуби

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,