React Tag Filter Confusion

I am trying to finish this react assessment. I have 2 components, one

that makes tags for a list and another that is a search bar that filters them

but I have an issue getting the tags state from my makes tags component to

my search bar that filters them component. There is a common ancestor

with a search bar that filters a list with the tags but when I try to pass the

tag value from there as props or use global context whenever I create a tag

in one item of the list it also creates it in another. How can I get my tags

state value to my tag search bar component?

//component that creates tags
const NewTag = () => {

    const [tags, setTags] = useState([]);


    const onFormSubmit = (event) => {

    const createNewTag = event => {
        if (event.key === 'Enter') {
   = "";


    return (
    <div class="tags">
    <form className="tag-submit" onSubmit={onFormSubmit}>
    <div className="tags-input">
    <ul className="tags-container" onClick={console.log(tags)}>
    {, index) => (
        <li className="theTag" key={index}>
    <input className="addTags" type="text" placeholder="Add a tag" onKeyUp={createNewTag}/>

export default NewTag;

//component that filters tags
const TagSearchBar = () =>  {

    const [term, setTerm] = useState('');

    const filterTagSearch = () => {
        if (term === '') {
            return '';
        } else {
            //filter tag code

    return (
        <div className="tagSearchBar">
        <div className="tagSearch">
        <input className="inp" type="text" size="160" placeholder="type a tag" 
        value={term} onChange={(e) => setTerm(}/>

export default TagSearchBar;

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.