уважаемые разработчики. Я новичок в React.js и поэтому некоторые ошибки для меня очень не понятны. У меня есть массив объектов созданный с помощью хука useState. Этот массив это "посты людей", которые я хочу сортировать по названию или содержанию(первой букве). Сортировка происходит в зависимости от значения select. Не буду долго всё описывать, думаю вы поймёте мой простой код) Любая помощь будет очень полезна:)
Файл TwoPostSort.js
import React, { useState } from 'react';
const TwoPostSort = ({ options, defaultSort, createSort}) => {
const [ValueSort, setValueSort] = useState('');
const SortNeW = () => {
const NewSort = [ValueSort].reduce(function(a, b){
return a + b;
});
createSort(NewSort);
console.log(NewSort);
}
return (
<div style={{ margin: '5px 0px 30px 0px' }}>
<select
value={ValueSort}
onChange={e => setValueSort(e.target.value)}
onChange={SortNeW}
>
<option disabled value="">{defaultSort}</option>
{options.map(option =>
<option key={option.toString()} value={option.value}>
{option.name}
</option>
)}
</select>
</div>
);
};
export default TwoPostSort;
Файл App.js
import React, { useRef, useState } from "react";
import TwoPostSort from "./components/TwoPostSort";
function App() {
const [postu, setPostu] = useState([
{ id: 10, title: "Aa", body: "12" },
{ id: 11, title: "aA", body: "13" },
{ id: 12, title: "bb", body: "11" },
]);
const [selectorSort, setselectorSort] = useState("");
const CreateNewSort = (NewSort) => {
setselectorSort(NewSort);
console.log(NewSort);
setPostu([...postu].sort((a, b) => a[NewSort].localeCompare(b[NewSort])));
};
return (
<div className="App">
<TwoPostSort
value={selectorSort}
createSort={CreateNewSort}
defaultSort="Сортировка"
options={[
{ value: "title", name: "По названию" },
{ value: "body", name: "По описанию" },
]}
/>
{postu.length !== 0 ? (
<PostList postuu={postu}/>
) : (
<div>
<h1 style={{ textAlign: "center", color: "green" }}>
Посты не найдены
</h1>
</div>
)}
</div>
);
}
export default App;
Файл PostList.js
import React, { useState } from 'react';
import MyButton from './Form/MyButton';
const PostList = ({ postuu, remove }) => {
return (
<ul>
{postuu.map(post => <PostItem id={post.id} title={post.title} body={post.body} key={post.toString()} remove={remove} post={post} />)}
</ul>
);
}
const PostItem = (props) => {
return (
<div className="post">
<div className="post__content">
<strong>{props.id}</strong><br />
<span>{props.title}{props.body}</span>
</div>
<div className="post__btn">
<MyButton
onClick={() => props.remove(props.post)}>
Удалить
</MyButton>
</div>
</div>
);
}
export default PostList;