React で親コンポーネントから子コンポーネントの state を変更する方法

Question

実現したいこと

現在、以下のようなJavaScriptコードをReactを使って書いています。下に示しているのは２つのReactコンポーネントSideBarとPaperFolderで、SideBarの子要素がPaperFolderという関係にあります。PaperFolderはMaterial-UIの<List>を使って書いており、それをSideBarが持つstateのfolderという配列に入れて表示します。

今、私が実現したいと思っている機能は、PaperFolder要素がクリック（選択）されたときにその要素の背景色を変え、以前に選択されていた要素がある場合には背景色をもとに戻すという機能です。何番目の要素が選択されているかは親要素のselectedIdxで持ちます。このstateはhandleSelectedIdxというメソッドを子要素(PaperFolder)内のselectメソッドから呼び出すことによって変更します。ここまでは自力で実装することができたのですが、ある要素をクリックしたときにすでに選択状態になっている要素があったときに選択状態にある要素の背景色をもとに戻すという機能が実装できません。親要素で現在選択している要素のインデックスをもっているので(selectedIdx)、配列folderのselectedIdx番目のPaperFolder要素のselected要素を変更すれば良いのだろうということはわかるのですが、これはどのようにしたら書くことができますでしょうか？

class SideBar extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isOpen: true,
      numFolders: 0,
      folders: [],
      selectedIdx: null,
    };

    this.handleDrawer = this.handleDrawer.bind(this);
    this.createFolder = this.createFolder.bind(this);
  }

  handleDrawer() {
    this.setState({isOpen: !this.state.isOpen});
  }

  handleSelectedIdx(message) {
    this.setState({selectedIdx: message.selectedIdx});
  }

  createFolder() {
    this.setState({
      folders: this.state.folders.concat(
        <PaperFolder 
          key={this.state.numFolders}
          index={this.state.numFolders}
          deleteFunc={this.deleteFolder.bind(this)}
          callback={this.handleSelectedIdx}
        />
      )
    });

    this.setState({ numFolders: this.state.numFolders + 1 });
  }

  render() {
    const { classes } = this.props;

    return (
      <Drawer
        variant="permanent"
        open={this.state.isOpen}
      >
        <div className={classes.allFolders}>
          { this.state.folders }
        </div>
      </Drawer>
    )
  }
}

class PaperFolder extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      selected: false,
    }

    this.handleListClick = this.handleListClick(this);
    this.select = this.select.bind(this);
  }

  handleListClick() {
    this.setState({selected: !this.state.selected});
  }

  select() {
    this.setState({selected: !this.state.selected});
    this.props.callback({'selectedIdx': this.props.index});
  }

  render() {
    const { classes } = this.props;
    const folderStyle = clsx({
      [classes.folder]: true,
      [classes.selected]: this.state.selected
    });

    // TODO: move <List> out of PaperFolder component
    return (
      <List className={classes.folder} onClick={this.select}>
        <ListItem 
          className={folderStyle}
          onClick={this.handleListClick}
        >
        </ListItem>
      </List>
    )
  }
}

---

追記

親要素からpropsとして渡して制御するように変更してみました。親要素に新たに各PaperFolder要素が選択されているかされていないかを知るための配列(folderSelectedList)を導入してこれをpropsとして子要素に渡すようにしてみたのですがうまく動作しません。どこがおかしいのでしょう？

class SideBar extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isOpen: true,
      numFolders: 0,
      folders: [],
      folderSelectedList: [],
      selectedIdx: null,  // store the index of folder selected or null
    };

    this.handleDrawer = this.handleDrawer.bind(this);
    this.createFolder = this.createFolder.bind(this);
    this.handleSelectedIdx = this.handleSelectedIdx.bind(this);
  }
  handleSelectedIdx(message) {
    var folderSelectedList = this.state.folderSelectedList.slice();
    if (this.state.selectedIdx !== null) {
      folderSelectedList[this.state.selectedIdx] = false;
    }
    this.setState({selectedIdx: message.selectedIdx});
    folderSelectedList[this.state.selectedIdx] = true;
    this.setState({folderSelectedList: folderSelectedList});
  }

  createFolder() {
    this.setState({
      folderSelectedList: this.state.folderSelectedList.concat(false),
      folders: this.state.folders.concat(
        <PaperFolder 
          key={this.state.numFolders}
          index={this.state.numFolders}
          isSelected={this.state.folderSelectedList[this.state.numFolders]}
          deleteFunc={this.deleteFolder.bind(this)}
          callback={this.handleSelectedIdx}
        />
      )
    });

    this.setState({ numFolders: this.state.numFolders + 1 });
  }
  // ...
}

class PaperFolder extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      name: "Untitled",
    }
    
    this.handleClose = this.handleClose.bind(this);
    this.select = this.select.bind(this);
  }

  select() {
    // this.setState({selected: !this.state.selected});
    this.props.callback({'selectedIdx': this.props.index})
  }

  render() {
    const { classes } = this.props;
    const folderStyle = clsx({
      [classes.folder]: true,
      [classes.selected]: this.props.isSelected
    });

    // TODO: move <List> out of PaperFolder component
    return (
      <List className={classes.folder} onClick={this.select}>
        <ListItem 
          className={folderStyle}
          onClick={this.handleListClick}
        >
        </ListItem>
      </List>
    )
  }
}

Answer 1

これはどのようにしたら書くことができますでしょうか？

そのような書き方はすべきでありません。外部から制御しなければならない状態に関しては、コンポーネントにstateとして持たせるのではなく、外部からpropsとして供給する、というのがReactで書くときの原則です。

Comments

[Yhaya]

書き直してみたのですが、うまく動きません。質問に追記したので見ていただけないでしょうか？