> For the complete documentation index, see [llms.txt](https://gzqsjtu.gitbook.io/workspace/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gzqsjtu.gitbook.io/workspace/react/lifting-functions-state-up.md).

# Lifting functions/ state up

One very important descision every react developer has to make is how to structure the app and which component will be responsible for holding the data.

Because data can cause elements to re-render we should keep data as low down in the tree of elements as possible. This keeps each piece as separate and modular as possible.

There will be many cases in which the data that you use in one component in the tree is needed in a *sibling* component.

![](/files/-MEO4eH3luLTIcOS2uzs)

For this example let's take the `Line` component.

There could be many features that are implemented in this component:

* conditional rendering of the drop down options
* rendering the drop down options from an ajax call to get train line conditions
* etc., etc.

However, from the wireframe it's most likely that the drop down affects the main `Predictions` component.

In this case, where the selected line affects another sibling component, where do you store that state?

The lowest place in the element tree with these two components in common is actually still at the top level of this page. (Which is fine, and mostly unavoidable)

In this case we have to store the actual state in the top level.

The technique for doing this is called "lifted" functions.

**Lifted Functions**

If we want state to be available for 2 sibling components, we have to store it in the closest parent.

In order to set state on a parent component we *must* call a method on the parent component.

When the state is set on the parent, it will pass back down the data set in the method.<br>

```
class App extends React.Component{

    constructor(){
        super();
        this.state = {
            station : "banana"
        };

    }

  setCurrentStation(station){
    this.setState({station})
  }

  render(){
    return (
      <div>
        <Line setCurrentStation={(s)=>{this.setCurrentStation(s)}} station={this.state.station}/>
        <Trains station={this.state.station}/>
      </div>
    );
  }
}

class Line extends React.Component{

  render(){
    return (
      <div>
        <h1>{this.props.station}</h1>
        <button onClick={this.props.setCurrentStation}/>
      </div>
    );
  }
}

class Trains extends React.Component{

  render(){
    return (
      <div>
        <h1>{this.props.station}</h1>
      </div>
    );
  }
}
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://gzqsjtu.gitbook.io/workspace/react/lifting-functions-state-up.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.