0
Help us understand the problem. What are the problem?

posted at

updated at

React:Bootstrap Tabタイトルを子コンポーネントから変更

ReactでBootstrapのTabsを使っていて、keyのあるオブジェクトから作ったTabのタイトルを子コンポーネントからkeyを指定して変更した。メモを2点ほど。

ComponentParent
export default function ComponentParent(props) {
  const [tabTitles, setTabTitles] = useState(null)
  const [currentKey, setCurrentKey] = useState(null)

  useEffect(() => {
    // ここでは、例なので単純にオブジェクト直接記述
    setTabTitles({ 111: "タブ1", 222: "タブ2", 333: "タブ3" })
    setCurrentKey(111)
  }, [])

  useEffect(() => {
    // 何か選択が変わった時の処理
  },[currentKey]}


  const TabSample = () => {
    if (!currentKey || !tabTitles) return <div>Loading...</div>;
    return (
      <Tabs
        id="tab-sample"
        activeKey={ currentKey }
        onSelect={(k) => setCurrentKey(k)}
      >
                {/* メモ1: オブジェクトをmapで展開するにはこう書けばよいみたい。 */}
        { Object.keys(tabTitles).map(key => <Tab eventKey={ key } title={ tabTitles[key]} key={ key }></Tab> }
      </Tabs>
    )
  }

  const changeTabTitle = (key, title) => {
    /* メモ2: tabTitles[key] = title してセットする方法だと更新されない。展開すること。 */
    setTabTitles({...tabTitles, [key]: title}) 
  }

  return (
    <TabSample />
    <ComponentChild 
       changeTabTitle={ (key, title) => changeTabTitle(key, title) } 
    />
  )
}
ComponentChild
export default function ComponentChild(props) {

 const clickChangeTabTitle1 = () => {
   props.changeTabTitle(111, "タブA")
 }

 return (
   <button onClick={ clickChangeTabTitle1 } >タブ1のタイトル変更</button>
 )
}
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
0
Help us understand the problem. What are the problem?