Я новичок в React и пытаюсь напечатать значения кнопки «Ввод при отправке». Я объявил пустое состояние и сохранил в нем входное значение. При попытке показать единственные входные данные я не получаю никакой ошибки. Теперь я пытался сохранить его в массиве и отобразить с помощью компонента Results с помощью метода Map.
Ошибка:
TypeError: item.map is not a function
Приложение. js:
import React, { Component } from 'react'
import Result from './Result';
import Navbar from './Navbar';
import Jumbotron from 'react-bootstrap/Navbar';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
export default class App extends Component {
constructor(){
super();
this.state={
items:'',
addedItems:[]
}
this.handleChange=this.handleChange.bind(this);
this.handleSubmit=this.handleSubmit.bind(this);
}
handleChange(e){
this.setState({
items:e.target.value
})
}
handleSubmit(e){
this.setState({
addedItems:this.state.items
})
}
render() {
return (
<div>
<Navbar/>
<Jumbotron>
<p>
Enter the things you would like to buy.
</p>
</Jumbotron>
<Form>
<Form.Group controlId="formBasicEmail">
<Form.Control value={this.state.items} onChange={this.handleChange}type="email" placeholder="Enter email" />
</Form.Group>
<Button onClick={this.handleSubmit}variant="primary" type="submit">
Submit
</Button>
</Form>
<Result item={this.state.addedItems} />
</div>
)
}
}
Результат. js
import React from 'react'
import ListGroup from 'react-bootstrap/ListGroup'
export default function Result(props) {
const {item}=props;
//let show=item.map(item=>item);
let itemShow=item.map(i=>{
return <li>{i}</li>
})
return (
<div>
<ListGroup>
{itemShow}
</ListGroup>
</div>
)
}