Как установить состояние из сопоставленного элемента в компоненте React

Я пытаюсь изменить состояние компонента, который является частью сопоставленного массива объектов из файла json. Я хочу ТОЛЬКО изменить элемент, содержащий нажатую кнопку, и ничего другого.

Я пытался установить свойство (projectID) с помощью onClick, и хотя я могу заставить его переключать один элемент состояния (расширенный или нерасширенный), он делает это для ВСЕХ возвращаемых результатов. Поэтому я пытался получить идентификатор проекта (установленный в данных) и использовать его для установки условного выражения. Но я не могу заставить projectId обновляться одним щелчком мыши. Я кратко поиграл с контекстом, но я думаю, что мне не хватает чего-то более простого. Я пытался это сделать в onClick (как показано) и изнутри onViewChange, но это не сработало, так как я не могу получить доступ к item.id из-за пределов сопоставленного элемента.

Я использую условное выражение, основанное на реквизите, переданном от пары уровней выше, чтобы установить категорию, показывающую только те объекты, которые я хочу. Эта часть, кажется, работает. Поэтому я удалил свое расширенное состояние, так как здесь нет необходимости.

 import React from 'react';
 import projects from '../data/projects.json';

 class ProjectCard extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
        projects,
        expanded: false,
        projectId: -1
    }
  }

  onViewChange = (e) => {
    this.setState({
        expanded: !this.state.expanded
    });
    console.info(this.state.projectId)
  };

  render() {
    return (
        <React.Fragment>
        {this.state.projects.map((item) => {
            if (!this.state.expanded && item.category === this.props.category) { 
                return (
                        <div key = {item.id} className = "project-card">
                            <div className = "previewImg" style = {{backgroundImage: `url(${item.previewImg}` }} ></div>
                            <div className = "copy">
                                <h2>{item.title}</h2>
                                <p>{item.quickDesc}</p>
                            </div>
                            <div className = "footer">
                            {item.tools.map((tool) => {
                                return ( 
                                    <div key = {tool} className = "tools" style = {{backgroundImage: `url(${tool}` }}></div>
                                );
                            }
                            )}
                                <button onClick = {() => this.onViewChange({projectId: item.id})} className = "btn float-right"><i className = "fas fa-play"></i></button>
                            </div>
                        </div> 
                        );
                    }
            }

        )}
        </React.Fragment>
    );
  };
};

 export default ProjectCard;

Я установил консольный журнал, чтобы сообщать мне, изменяется ли projectId, и он всегда возвращается как мое значение по умолчанию (-1). Вставленная версия - единственная, которая не выдает ошибок в отношении неопределенных значений/объектов, но по-прежнему никаких изменений. Если я смогу заставить проект измениться на основе item.id с помощью нажатой кнопки, я думаю, что смогу понять условное выражение и взять его оттуда.