質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

316閲覧

React inputformで入力した値をリストに追加したい

whiwhdiw

総合スコア70

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/01/14 05:45

編集2020/01/14 06:00

前提・実現したいこと

名前を入力しボタンを押したらListが追加される機能を作っています。
使っている技術は
React.js
Typescript
Hooks  です。

該当のソースコード

import React, { FC, useState } from 'react'; import ReactDOM from 'react-dom'; import styled from 'styled-components'; import { Card, CardContent, Button } from '~/components/Card'; const NameChange = (value: string):void => { setText(value); } const Index:FC<Props> { const [ text, setText ] = useState('') const [NameList, setNameList] = useState() render() { return ( <React.Fragment> <Card> <CardContent> <div> <input type="input" value={text} onChange = {(e) => setText(e.target.value)} /> <Button onClick = {} disabled={false} > 名前 </Button> </div> </CardContent> </Card> <Card> <CardContent> <Case value={}> <ListItem /> </Case> </CardContent> </Card> </React.Fragment> ); } }
import React, { FC } from 'react'; import { List, ListItemText, } from '@material-ui/core'; import ReactPaginate from 'react-paginate'; const List: FC = () => ( <React.Fragment> <List > <ListItemText> </ListItemText> </List> </React.Fragment> ); export default List;

inputformで入力した値をButtonを押したときに入力した名前がListに追加されるようにしたいです。
どのように書いたらいいのかわからないので教えて欲しいです。

まずOnClickイベントが行われたときにListに保存するので
const [NameList, setNameList] = useState() ← 保存するための定義を書いたのですが型がありませんと怒られてしまいます。
どうしたらいいでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

NameListが何の型かわかりませんがString型なら
const [NameList, setNameList] = useState(string[])
とすればいいはずです。

投稿2020/01/14 06:18

Nippun

総合スコア1147

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

whiwhdiw

2020/01/14 06:19

Listってstring型何でしょうか?
Nippun

2020/01/14 06:20

Listは配列です
whiwhdiw

2020/01/14 06:21

配列はどういう型にすればいいのでしょうか?
Nippun

2020/01/14 06:23

string ならStirngの配列にIntならIntの配列にすればいいでのは
whiwhdiw

2020/01/14 06:26

const [NameList, setNameList] = useState(namesList)としたいです。 その場合はnamesListを型定義しないといけないのでしょうか?
Nippun

2020/01/14 06:27

そうなりますね
whiwhdiw

2020/01/14 06:29

型定義を const interface namesList { id: number text: string } と定義したのですが なぜかnamesListに型がないと怒られます
whiwhdiw

2020/01/14 06:29

書き方が悪いのでしょうか?
Nippun

2020/01/14 06:31

constいらないです
whiwhdiw

2020/01/14 06:35

とったらcan not find name namesListとなりました
whiwhdiw

2020/01/14 06:43

Interface namesList { name: string, id: number, };
whiwhdiw

2020/01/14 06:49

なぜかパソコン再起動したらエラーが消えました。何だったのかわからないです
whiwhdiw

2020/01/14 06:55

Buttonを押したときのonclickの処理はどうやって書いたらいいでしょうか? 今定義したnamesListにpushしてtestを追加すればいいのでしょうか? namesList.push.(text, 1)みたいな感じで
Nippun

2020/01/14 08:00 編集

別で質問を投稿してください
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問