import React from 'react'; import { Input, Button, List } from 'antd'; const TodoListUI = (props) => ( <div style={{ marginTop: '10px', marginLeft: '10px' }}> <div> <Input placeholder="todo info" value={props.inputValue} style={{ '300px', marginRight: '10px' }} onChange={props.handleInputChange} /> <Button type="primary" onClick={props.handleBtnClick}>Submit</Button> </div> <List size="small" style={{ marginTop: '10px', '300px' }} bordered dataSource={props.list} renderItem={ (item, index) => (<List.Item onClick={() => { props.handleItemClick(index) }}>{item}</List.Item>) } /> </div> ) export default TodoListUI