📝

[React] props使い方

2023/07/17に公開

React

初心者

JSX

tech

props

どんな時propsを使いますか？

今h4のタグの中にlocationのStateを使いたいんです。

function App (){
  let [location, setLocation] = useState(['東京', '青森', '大阪']);
  return (
    <div>
      <Modal></Modal>
    </div>
  )
}

function Modal(){
  return (
    <div className="modal">
      <h4>ここ！！！！</h4>
    </div>
  )
}

普通にStateを書いたらエラーが発生します。

<h4>location[0]</h4> // エラー

この時propsを使ってstateをcomponentに渡します。

step1. タグにstateを渡す

新しい変数名={渡すStateの名}
普通は同じにします。

function App (){
  let [location, setLocation] = useState(['東京', '青森', '大阪']);
  return (
    <div>
      <Modal location={location}></Modal> //ここです!!!!!
    </div>
  )
}

function Modal(){
  return (
    <div className="modal">
      <h4></h4>
    </div>
  )
}

step2. 渡したstateをcomponentでもらう

パラメータをpropsとしてもらって、
props.statenの名で使えます。

function App (){
  let [location, setLocation] = useState(['東京', '青森', '大阪']);
  return (
    <div>
      <Modal location={location}></Modal> 
    </div>
  )
}

function Modal(props){ //ここです!!!!!
  return (
    <div className="modal">
      <h4>{props.location[0]}</h4> //ここです!!!!!
    </div>
  )
}

props

Discussion