Reactで複数のフォームを作成したい

Question

Reactで複数の値を扱うフォームを作成したいのですが、１つの値しか出力されなくて困っています。

useContextで値を管理しています。
useStateでオブジェクトを作成しています。

useContextでグローバルな値を作成

ファイル名（InputProvider.jsx）

import { createContext, useState } from "react";

export const InputContext = createContext({});

export const InputProvider = (props) => {
  const { children } = props;
  const [allState, setAllState] = useState([]);
  const [sendData, setSendData] = useState({name: "", tel: "", detail: ""})
  const onChangeTodo =(e) => setSendData(e.target.value);

  console.log("inputProvider__sendData",sendData);

  const onClickAdd = () => {
    if(sendData === "") return;
    const newAllState = [...allState, sendData];
    setAllState(newAllState);
  }

  return(
    <InputContext.Provider value={{allState, setAllState, onClickAdd, sendData, setSendData, testObj, onChangeTodo }} >
      { children }
    </InputContext.Provider>
  )
}

フォーム画面作成

ファイル名（form.jsx）

import React, { useState, useContext } from 'react'
import styled from "styled-components";
import { Header } from '../organism/Header'
import { Footer } from '../organism/Footer'
import { InputContext } from '../provider/InputProvider';

export const Form = () => {
  const { allState, onClickAdd, sendData, setSendData, onChangeTodo, testObj } = useContext(InputContext);

  // console.log("form.jsx",sendData);
  // console.log("form-testObj",testObj);
  console.log("from__sendData",sendData);


  return (
    <>
    <Header />
    <SH2>登録画面</SH2>
    <SForm>
      <div>
      <label>店名</label>
      <input placeholder="店名" name="name" onChange={(e) => {setSendData({ ...allState, name: e.target.value })}}/>
      <label>電話番号</label>
      <input placeholder="電話番号" name="tel" onChange={(e) => {setSendData({ ...allState, tel: e.target.value })}}/>
      <label>メモ</label>
      <textarea placeholder="メモ" name="detail" onChange={(e) => {setSendData({ ...allState, detail: e.target.value })}}/>
      <button type="button" onClick={() => onClickAdd() }>登録</button>
      </div>
    </SForm>
    <Footer />
    </>
  )
}
const SH2 = styled.h2`
  font-size:40px;
  text-align:center;
`

const SForm = styled.form`
  margin: 60px auto;
  padding: 10px;
  display: block;
  background-color: #e6e6e6;
  width: 60%;
  label{
    margin-top:20px;
    margin: auto;
    display:block;
    font-size:24px;
    width:80%;
  }
  input{
    margin:0 auto;
    display: block;
    background-color: #FFF;
    width:80%;
    height:30px;
    border: 1px solid #aaa;
  }
  textarea{
    margin: 0 auto;
    display:block;
    background-color: #FFF;
    width:80%;
    height:120px;
    border: 1px solid #aaa;
  }
  button{
    margin: 20px auto;
    padding: 20px;
    display: block;
    background-color: #9CFAE4;
    border-radius:20px;
    box-shadow: 0 4px 0 #8ed1c2;
    &:hover{
      box-shadow: 0 0 0;
      transform: translateY(3px);
    }
  }
`

フォームで登録された値をここに表示

ファイル名（All.jsx）

import React, { useContext } from "react";
import testimg from "../image/Gourmet.jpeg";
import styled from "styled-components";
import { InputContext } from "../provider/InputProvider";
import { Header } from "../organism/Header";
import { Footer } from "../organism/Footer";

export const All = () => {
  const { allState, testObj, sendData } = useContext(InputContext);
  // console.log("allState-All",allState)
  // console.log("All.jsx-testObj",testObj);
  console.log("All__sendData",sendData);
  
  return (
    <>
    <Header />
    <SH2>全て</SH2>
    <SUl>
      {
        allState.map((todo, i) => {
          return(
            <SLi key={i}>
              <img src={testimg} />
              <h3>{this.state.name}</h3>
              <p>{this.state.tel}</p>
              <p>{this.state.detail}</p>
            </SLi>
          )
        })
      }
    </SUl>
    <Footer />
    </>
  )
}

const SH2 = styled.h2`
  margin: 0 auto;
  padding: 16px;
  text-align: center;
  background-color: skyblue;
  border-radius:10px;
  font-size:30px;
  width:18%;
`

const SUl = styled.ul`
  padding-bottom:100px;
`
const SLi = styled.li`
  margin: 20px auto;
  display:flex;
  justify-content: space-around;
  align-items: center;
  background-color: gray;
  width:50%;

  img{
    width:16%;
  }
  h3{
    font-size: 28px;
    width:50%;
  }
`

Answer 1

form.jsxでreturnする記述は、まとめて<div></div>でくくりましょう。
All.jsx側では、{ this.state.name } のような形で受け取ります。

Reactでテキストボックス入力値を取得するがよいサンプルです。

Comments

[yanatoritakuma]

回答ありがとうございます。
form.jsxとAll.jsxを編集してみましたが、TypeError: Cannot read property 'state' of undefinedとエラーがでてしまいます。
自分の考えでは、InputProvider.jsxのonClickAddの書き方に問題があるのではないかと感じています。