У меня есть компонент TodoList
:
import React, {useRef, useState} from 'react';
import styles from './TodoList.module.css';
import TodoItems from "./TodoItems/TodoItems";
function TodoList() {
const [items, setItems] = useState([]);
function addItem(e) {
let itemArray = items;
if (inputEl.current.value !== '') {
itemArray.unshift({
text: inputEl.current.value,
key: Date.now()
});
setItems(itemArray);
inputEl.current.value = '';
}
console.log(itemArray);
e.preventDefault();
}
const inputEl = useRef(null);
return (
<div className={styles.main}>
<div className={styles.header}>
<form onSubmit={addItem}>
<input ref={inputEl} placeholder='Введите задачу'></input>
<button type='submit'>Ок</button>
</form>
</div>
<TodoItems entries={items}/>
</div>
);
}
export default TodoList;
Который вызывает компонент TodoItems
:
import React from 'react';
import styles from './TodoItems.module.css';
function TodoItems(props) {
let todoEntries = props.entries;
console.log(todoEntries);
let listItems = todoEntries.map((item) => {
return <li key={item.key}>{item.text}</li>;
});
console.log(listItems);
return (
<div className={styles.main}>
<ul>
{listItems}
</ul>
</div>
);
}
export default TodoItems;
Но TodoItems
просто не отображается. Хотел бы получить помощь в данном вопросе. TodoItems
отобажается только при внесении изменений в код и сохранении.
Update: Написал классовый компонент, он работает, но не понимаю чем он отличается от функционального.
import React from 'react';
import styles from './TodoList.module.css';
import TodoItems from "./TodoItems/TodoItems";
class TodoList extends React.Component {
constructor(props) {
super(props);
this.state = {
items: []
};
this.addItem = this.addItem.bind(this);
}
addItem(e) {
let itemArray = this.state.items;
if (this._inputElement.value !== '') {
itemArray.unshift({
text: this._inputElement.value,
key: Date.now()
});
this.setState({
items: itemArray
});
this._inputElement.value = '';
}
e.preventDefault();
}
render() {
return (
<div className={styles.main}>
<div className={styles.header}>
<form onSubmit={this.addItem}>
<input ref={(a) => this._inputElement = a} placeholder='Введите задачу'/>
<button type='submit'>Ок</button>
</form>
</div>
<TodoItems entries={this.state.items}/>
</div>
);
}
}
export default TodoList;
const [items, setItems] = useState([]);
<TodoItems entries={items}/>
Вы передаете пустой массив. Визуально у вас ничего не отрендерится изначальноsetItems(itemArray);