title: getDerivedStateFromProps, change of state under the influence of changing props
body: <p>I click Item -> I get data from url:<code>https: // app / api / v1 / asset / $ {id}</code>. The data is saved in <code>loadItemId</code>. I am moving <code>loadItemId</code> from the component <code>Items</code> to the component <code>Details</code>, then to the component <code>AnotherItem</code>.
  Each time I click <code>Item</code> the props <code>loadItemId</code> changes in the <code>getDerivedStateFromProps</code> method. Problem: I'll click <code>Element D</code> -> I see in console.log 'true', then I'll click <code>Element E</code> --> It display in console.log <code>true</code> and<code>false</code> simultaneously, and it should display only <code>false</code>.</p>
  
  <p>Trying to create a ternary operator <code>{this.state.itemX ['completed'] ? this.start () : ''}</code>. If <code>{this.state.itemX ['completed']</code> call the function <code>this.start ()</code></p>
  
  <p>Code here: <a href="https://stackblitz.com/edit/react-y43r9d" rel="noreferrer">stackblitz</a></p>
  
  <p>Picture: <a href="https://imgur.com/a/OBxMKCd" rel="noreferrer">https://imgur.com/a/OBxMKCd</a></p>
  
  <p><strong>Items</strong></p>
  
  <pre><code>class Items extends Component {
    constructor (props) {
      super(props);
      this.state = {   
        itemId: null,  
        loadItemId: ''
      }
    }
  
    selectItem = (id) =&gt; {
      this.setState({
        itemId: id
      })
  
          this.load(id);
    }
  
      load = (id) =&gt; {
  
          axios.get
              axios({
                      url: `https://app/api/v1/asset/${id}`,
                      method: "GET",
                      headers: {
                          'Authorization': `Bearer ${token}`           
                      }
              })
              .then(response =&gt; {
                      this.setState({
                              loadItemId: response.data
                      });
              })
              .catch(error =&gt; {
                      console.log(error);
              })
  }
  
    render () {
      return (
              &lt;div &gt; 
                  &lt;Item
                      key={item.id}
                      item={item}
                      selectItem={this.selectItem}
                  &gt;
                  &lt;Details
                      loadItemId={this.state.loadTime}  
                  /&gt; 
              &lt;/div&gt;
      )
    }
  </code></pre>
  
  <hr>
  
  <p><strong>Item</strong></p>
  
  <pre><code>class Item extends Component {
    render () {
  
      return (
        &lt;div  onClick={() =&gt; this.props.selectItem(item.id}&gt;
  
        &lt;/div&gt;
      )
    } 
  }
  </code></pre>
  
  <hr>
  
  <p><strong>Details</strong></p>
  
  <pre><code>class Details extends Component {
      constructor() {
          super();
      }
  
    render () {
      return (
              &lt;div&gt; 
                  &lt;AnotherItem 
                      loadItemId = {this.props.loadItemId}        
                  /&gt;       
              &lt;/div&gt;
      )
    } 
  }
  </code></pre>
  
  <hr>
  
  <p><strong>AnotherItem</strong></p>
  
  <pre><code>class AnotherItem extends Component {
  
  
    constructor() {
      super();
  
      this.state = {
        itemX: ''
      };
    }
  
  
    static getDerivedStateFromProps(nextProps, prevState) {
      if(nextProps.loadItemId !== prevState.loadItemId) {
        return { itemX: nextProps.loadItemId }
      }
  
    render () {
        console.log(this.state.itemX ? this.state.itemX['completed'] : '');
  
      {/*if this.state.loadX['completed'] === true, call function this.start()*/ }
      return (
              &lt;button /*{this.state.loadX['completed'] ? this.start() : ''}*/ onClick={this.start}&gt;
                  Start
              &lt;/button&gt;      
      );
    }
  }
  </code></pre>