CODEWITHSUNDEEP
javascriptreactjsjsx
Levi Murray
Levi Murray

Reputation: 187

ReactJS: Change text via index from array in a different component

Sorry if the title is confusing. I'm not too sure how to word this.

On my index.js I have an array

let appts = [
{
    "firstName": "Michael",
    "lastName": "Scofield",
    "dob": "06-2-1972",
    "sex": "Male",
    "summary": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at pulvinar lacus, nec consequat felis.",
    "time": "10:00 AM"
},
{
    "firstName": "Lincoln",
    "lastName": "Burrows",
    "dob": "02-17-1970",
    "sex": "Male",
    "summary": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at pulvinar lacus, nec consequat felis.",
    "time": "10:20 AM"
},
{
    "firstName": "Sara",
    "lastName": "Tancredi",
    "dob": "06-1-1977",
    "sex": "Female",
    "summary": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at pulvinar lacus, nec consequat felis.",
    "time": "10:40 AM"
}

]

In my Sidebar component, I output the array into a list item, buttons of sorts

let filteredAppts = this.props.appts.filter(
        (appt) => {
            let name = appt.firstName + ' ' + appt.lastName;
            return name.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1;
        }
    );


<div className="appt-list">
    <ul>
        {filteredAppts.map((appt, index)=> {
            return <Appt appt={appt} key={index} index={index}/>
        })}
    </ul>
</div>

Then in my Appt component, I output the list item itself, and have a function that returns the index of the item that you clicked on (I was playing with things trying to get it to work)

var selected = 0;


handler(index, event) {
    selected = index;
    console.log(selected);
}

render() {
    return (
        <li onClick={this.handler.bind(this, this.props.index)}>
            <div className="appt-info">
                <h4>{this.props.appt.lastName + ', ' + this.props.appt.firstName}</h4>
                <span>{this.props.appt.time}</span>
            </div>
            <div className="appt-excerpt">  
                <p>{this.props.appt.summary}</p>
            </div>
        </li>
    )
}

So then inside of another component, I was the info of the appointment that you selected displayed.

<header className="appt-info">
                <h2>{this.props.appts[0].lastName + ', ' + this.props.appts[0].firstName}</h2>

I would want to replace this.props.appts[0] with the index of the item that was clicked on. But I'm not sure how I would transfer that selected variable, to the component.

My App looks like this

var selection = 2;

class App extends React.Component {
render() {
    return (
        <div className="appContainer">
            <Nav />
            <div className="appContent">
                <Sidebar appts={this.props.appts}/>
                <Patient appts={this.props.appts} selection={this.props.selection}/>
            </div>
        </div>
    );
}


render(<App appts={appts} selection={selection}/>, document.getElementById('app'));

Any help would be greatly appreciated, thanks!

Upvotes: 0

Views: 740

Answers (1)

Jordan Bonitatis
Jordan Bonitatis

Reputation: 1547

You need to bubble up your selection from the Sidebar back into the parent's state (App), which will then pass it back down to Sidebar's sibling, Patient

We can do this by passing a reference to the parent's handleApptSelection which will be called when Sidebar changes. You will do this by modifying Sidebar's handler method

class App extends React.Component {
  constructor(props) {
    super();
    this.state = {
      selectedAppt: appts[0]
    }
  }

  handleApptSelection(apptRec) {
    this.setState({selectedAppt: apptRec});  
  }

  render() {
    const {selectedAppt} = this.state;
    return (
      <div className="appContainer">
        <Nav />
        <div className="appContent">
          <Sidebar appts={this.props.appts} onSelect={this.handleApptSelection.bind(this)}/>
          <Patient appts={this.props.appts} selection={selectedAppt}/>
        </div>
      </div>
    );
}

Sidebar's handler method:

handler(index) {
  const {appts, onSelect} = this.props;
  selected = index;
  console.log(selected);
  onSelect(appts[index]);  // this is actually App's handleApptSelection method!
}

Upvotes: 2

Related Questions