Один State в модальном окне, как пофиксить
При нажатие на любой из постов, вылезает модальное окно, в котором отображаться свой текст. Но при вызове окна(любого поста) отображается один и тот же текст, хотя в консоли все отображается правильно. Как исправить?(На картинке вызывается( sunt ...)).
import React, { useState } from 'react'
import Modal from './Modal'
const Posts = ({post}) =>{
const [modalActive, setModalActive] = useState (true)
const [value, setValue] = useState('')
const filteredPost = post.filter(post => {
return post.title.toLowerCase().includes(value.toLowerCase())
})
return (
<div>
{
post.map((post, i) =>(
<div className="col-xs-12" >
<div className="hgroup" value={post.id} >
<h4 className="open-btn" onClick={() => setModalActive(true)}>{post.title}</h4>
</div>
<Modal active={modalActive} setActive={setModalActive}>
<h1>Пост {post.id}</h1>
<h4>{post.body}</h4>
</Modal>
</div>
))}
<div className="form">
<form className="serch__form">
<input type="text"
id="input"
placeholder="Search..."
lassName="serch__input"
onChange={(e) => setValue(e.target.value)}/>
</form>
</div>
</div>
)}
export default Posts
import React, { useState } from 'react'
import Posts from './Posts'
import './modal.css'
const Modal = ({active, setActive, children}) => {
const [post] = useState([])
return (
<div className={active ? 'modal active' : 'modal'} onClick = {() => setActive(false)}>
<div className={active ? 'modal__content active' : 'modal__content'} >
{children}
</div>
</div>
)}
export default Modal;