title: ReactJS: Dynamic previous & next buttons
body: <p>I am new to ReactJS and trying to understand how to accomplish a basic concept using best practices. The code below will render a list of items, when an item is clicked a stateful <strong></strong> component is toggled and data is passed from <strong></strong> to the <strong></strong> state object before being consumed by  on re-render.</p>
  
  <p>What I need help with is a method to retrieve data from siblings from the array example below. Once the data has been fetched for previous/next projects that data should be accessible to the <strong></strong> component. Can these siblings be accessed with a key value? If so, how would I use key?</p>
  
  <p><strong>DATA</strong>:</p>
  
  <pre class="lang-js prettyprint-override"><code>window.Seed = (function() {
    const projects = [
      {id:1, title:'Project 1', description:'Project 1 Description'},
      {id:2, title:'Project 2', description:'Project 2 Description'},
      {id:3, title:'Project 3', description:'Project 3 Description'}
    ]
  };
  </code></pre>
  
  <p><strong>REACT CODE:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>class ProjectList extends React.Component {
  
    state = {
      projects: [],
      isOpen: false,
      modalTitle: '',
      modalDescription: '',
      modalId: ''
    }
  
    componentDidMount() {
      this.setState({ projects: Seed.projects });
    }
  
    handleModalOpen = (id, title, description) =&gt; {
      this.setState({
        isOpen: true,
        modalId: id,
        modalTitle: title,
        modalDescription: description
      });
    };
  
    handleModalClose = () =&gt; {
      this.setState({ isOpen: false });
    };
  
    render() {
      const projects = this.state.projects;
  
      // GOAL #1: Pass previous/next project data as props
      // =================================================
      // Pass projects.map data from previous &amp; next siblings
      // to the current component or explore a new method to 
      // retrieve data from state? I can already tell that this
      // probably is not the most dynamic approach to handle
      // previous/next data.
  
      const projectComponents = projects.map((project) =&gt; (
        &lt;Project
          key={'project-' + project.id}
          id={project.id}
          title={project.title}
          url={project.url}
          description={project.description}
          background={project.background}
          onModalOpen={this.handleModalOpen}
          prevTitle={???}
          nextTitle={???}
          prevDescription={???}
          nextDescription={???}
        /&gt;
      ));
  
      if (this.state.isOpen) {
        return (
          &lt;Modal
            id={this.state.modalId}
            title={this.state.modalTitle}
            description={this.state.modalDescription}
            onModalClose={this.handleModalClose}
          /&gt;
        );
      } else {
        return (
          &lt;div className="projects-container"&gt;
            &lt;div id="projects" className="wrapper"&gt;
              {projectComponents}
            &lt;/div&gt;
          &lt;/div&gt;
        );
      }
    }
  }
  
  class Project extends React.Component {
    render() {
      return (
        &lt;aside className='item'&gt;
          &lt;a onClick={this.props.onModalOpen.bind(
            this, this.props.id, this.props.title, this.props.description
            // I think that I need to bind previous/next data here on click.
            // this.props.prevTitle, this.props.nextTitle
            // this.props.prevDescription, this.props.nextDescription
          )}&gt;
            &lt;img src={this.props.background} /&gt;
          &lt;/a&gt;
        &lt;/aside&gt;
      );
    }
  }
  
  class Modal extends React.Component {
    render() {
      return (
        &lt;div className="modal"&gt;
  
          // GOAL #2: Get sibling data from mapped array
          // =================================================
          // I would like to be able to pass previous and next
          // project data as props to populate these headings.
  
          &lt;h2&gt;Current Project: {this.props.title}&lt;/h2&gt;
          &lt;h2&gt;Previous Project: {this.props.prevTitle} &lt;/h2&gt;
          &lt;h2&gt;Next Project: {this.props.nextTitle} &lt;/h2&gt;
  
          // GOAL #3: Replace content with data stored in state
          // =================================================
          // I would like to be able to 'onClick' these buttons 
          // to replace the content of the &lt;Modal /&gt;. Essentially,
          // this should behave like a lightbox or carousel.
  
          // Initial Project Description
          &lt;p&gt;{this.props.description}&lt;/p&gt;
  
          // this.props.description = this.props.prevDescription
          &lt;button onClick={???}&gt;Previous Project&lt;/button&gt;
  
          // this.props.description = this.props.nextDescription
          &lt;button onClick={???}&gt;Next Project&lt;/button&gt;
          &lt;button onClick={this.props.onModalClose}&gt;Close Modal&lt;/button&gt;
  
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong><a href="https://codesandbox.io/s/DRN4xW93x" rel="nofollow noreferrer">DEMO</a></strong></p>
  
  <p>Thanks for reading!</p>
  
  <p><strong><a href="https://codesandbox.io/s/Rk360Yxz" rel="nofollow noreferrer">UPDATED SOLUTION</a></strong></p>