How to handle parameters between parent component and child component - reactjs

Question

This is working perfectly as a single component. I am trying to remove the search function because I render the component in another component which is embedded in a list. I don't want the search to appear in multiple places. I want to separate it and put it in a parent component.
I don't know how to handle this. I have tried to use props, probably I am doing it the wrong way.
import React, {useState} from 'react'
function TagsInput(props) {
const [tags, setTags] = useState([])
const [search, setSearch] = useState("");
const addTags = event => {
if (event.key === "Enter" && event.target.value !== "") {
setTags([...tags, event.target.value]);
props.selectedTags([...tags, event.target.value]);
event.target.value = "";
}
};
const removeTags = index => {
setTags([...tags.filter(tag => tags.indexOf(tag) !== index)]);
};
const handleFilterChange = e => {
setSearch(e.target.value)
}
function DataSearch(rows) {
return rows.filter((row) => row.toLowerCase().indexOf(search.toLowerCase()) > -1);
}
const searchPosts = DataSearch(tags);
return (
<>
<div>
<input value={search} onChange={handleFilterChange} placeholder={"Search"} />
</div>
<div className="tags-input">
<ul>
{searchPosts.map((tag, index) => (
<li key={index}>
<span>{tag}</span>
<i
className="material-icons"
onClick={() => removeTags(index)}
>x</i>
</li>
))}
</ul>
<input
type="text"
onKeyUp={event => addTags(event)}
placeholder="Press enter to add tags" />
</div>
</>
)
}
export default TagsInput
I am using this component in another component. I want to remove the search input but I don't know how to do it as it is component of a function not defined.
<div>
<input value={search} onChange={handleFilterChange} placeholder={"Search"} />
</div>
In the parent component
<TagsInput /> is embedded in it map function and I want avoid the search being created in multiple li.
Thank you and I am sorry for dump question as I am new to it.

Answer 1

What exactly do you need from this component? If you just need to remove the search input box you can just remove
<div>
<input
value={search}
onChange={handleFilterChange}
placeholder={'Search'}
/>
</div>
It seems you are calling this component inside a parent component loop. If you just need to call this component once you have to use it outside the loop.