React component not rendering after state change

Question

As the title says, when my state changes in my component, the sub components aren't rerendering.

  class App extends Component {
    constructor() {
      super()
      this.state = {
        url: ""
      }
      this.handleWorkerSelect = this.handleWorkerSelect.bind(this)
    }
    handleWorkerSelect(url) {
      this.setState({ url })
    }
    render() {
      return (
        <div className="App">
          <Workers className="workers" handleClick={this.handleWorkerSelect}/>
          <HermesWorker url={this.state.url}/>
        </div>
      )
    }
  }

  const Workers = (props) => {
    return (
      <div>
        <button onClick={() => props.handleClick("http://localhost:5000/api")}>Worker 1</button>
        <button onClick={() => props.handleClick("http://localhost:2000/api")}>Worker 2</button>
      </div>
    )
  }
  export default App

here is hermesworker.js

class HermesWorker extends Component {
    constructor() {
      super()
      this.state = {
        items: [],
        visited: [{name: "This Drive", path: "@back", root: ""}]
      }

      this.handleFolderClick = this.handleFolderClick.bind(this)
      this.handleFileClick = this.handleFileClick.bind(this)
    }
    componentDidMount() {
      if (this.props.url.length === 0) return
      fetch(this.props.url)
      .then(res => res.json())
      .then(items => this.setState({ items }))
    }
    render() {
      const folders = this.state.items.map((item) => {
        if (!item.isfile) {
          return <Card handleClick={this.handleFolderClick} root={item.root} path={item.path} isfile={item.isfile} name={item.name}     size={item.size}/>
        }
      })
      const files = this.state.items.map((item) => {
        if (item.isfile) {
          return <Card handleClick={this.handleFileClick} root={item.root} path={item.path} isfile={item.isfile} name={item.name} s    ize={item.size}/>
        }
      })
      const pathButtons = this.state.visited.map((item) => {
        return <PathButton handleClick={this.handleFolderClick} root={item.root} path={item.path} name={item.name}/>
      })
      return (
        <div>
          {pathButtons}
          <div className="flex-container">
            {folders}
            {files}
          </div>
        </div>
      )
    }
}

Essentially the issue is that the HermesWorker component is not being rerendered to use the new url prop. I am not sure why this is happening because for example, in the hermesworker it renders other subcomponents that do get rerendered during a state change.

Any information is appreciated

EDIT updated to add hermes worker, the file is over 100 lines so i cut out and only pasted the stuff I thought was important to the issue, can supply more if needed

Answer 1

I tested that code and it seems to be working fine. Could you provide What is set in HermesWorker component?

Edit: You'll require to set your state with setState on component updates. To do this, you may look for componentDidUpdate, which will run on every update. This is different from componentDidMount, which (hopefully) will run once and then the component may update and re-render, but re-render it's not considered as "mount". So you may try this instead:

constructor(props) {
  super(props);
  this.state = {
    url: '',
    items: [],
    visited: [{name: "This Drive", path: "@back", root: ""}]
  }
  this.fetchData = this.fetchData.bind(this);
}
componentDidMount() {
  //Mount Once
}

componentDidUpdate(prevProps, prevState) {

  if (this.state.url !== this.props.url) {
    this.setState({url: this.props.url});
    // Url state has changed.
  }
  if(prevState.url !== this.state.url){
    //run your fetch
    this.fetchData();
  }
}
fetchData(){
  if (this.props.url.length === 0) return
  fetch(this.props.url)
  .then(res => res.json())
  .then(items => this.setState({ items }));
}

Note: I moved the fetch to its own function, but that's completly up to you.

Also notice i added url to the state. Make sure to keep your props set to avoid unexpected behaviours.

Edit 2: componentDidUpdate will hand you prevProps and prevState as parameters. With prevProps you get access to whatever props you got on the previous update, and with prevState, as you may guess, you get access to whatever-your-state-was on the previous update. And by "on the previous update" i mean before the update got executed.