const data = [
  { id: 1, name: Mike, city: philps, state: New York },
  { id: 2, name: Steve, city: Square, state: Chicago },
  { id: 3, name: Jhon, city: market, state: New York },
  { id: 4, name: philps, city: booket, state: Texas },
  { id: 5, name: smith, city: brookfield, state: Florida },
  { id: 6, name: Broom, city: old street, state: Florida },
]
const tags = [
  { state: New York },
  { state: Texas },
  { state: Florida },
]

const [tags, setTgas] = useState(tags)

onChange={(e) => {
setTgas([...tags,{state: new_tag},]);
}

how can I get data by filtering using multiple tags? if i remove and add tag data will be displayed accordingly tags and is there is no tag all data will be displayed.

CodePudding user response：

you can use array filter

const data = [
  { id: 1, name: "Mike", city: "philps", state: "New York" },
  { id: 2, name: "Steve", city: "Square", state: "Chicago" },
  { id: 3, name: "Jhon", city: "market", state: "New York" },
  { id: 4, name: "philps", city: "booket", state: "Texas" },
  { id: 5, name: "smith", city: "brookfield", state: "Florida" },
  { id: 6, name: "Broom", city: "old street", state: "Florida" },
]
const tags = [
  { state: "New York" },
  { state: "Texas" },
  { state: "Florida" },
]

const newTags = tags.map(item => item.state)
const newArr = data.filter(item => newTags.includes(item.state))
console.log(newArr)

CodePudding user response：

I hope your logic to add and remove tags is already working as expected. Based on that your requirement can be fulfilled by following:

const data = [{
    id: 1,
    name: "Mike",
    city: "philps",
    state: "New York",
  },
  {
    id: 2,
    name: "Steve",
    city: "Square",
    state: "Chicago",
  },
  {
    id: 3,
    name: "Jhon",
    city: "market",
    state: "New York",
  },
  {
    id: 4,
    name: "philps",
    city: "booket",
    state: "Texas",
  },
  {
    id: 5,
    name: "smith",
    city: "brookfield",
    state: "Florida",
  },
  {
    id: 6,
    name: "Broom",
    city: "old street",
    state: "Florida",
  },
]
const tags = [{
    state: "New York"
  },
  {
    state: "Texas"
  },
  {
    state: "Florida"
  },
]

/* 
// Your react logic for adding and removing tags
const [tags, setTgas] = useState(tags)

onChange = {
    (e) => {
      setTgas([...tags, {
        state: new_tag
      }, ]);
    };
*/    
// Logic to display data based on filtered tags
const dataToDisplay = tags.length ? data.filter(item => tags.some(tag  => tag.state === item.state)) : data;

console.log(dataToDisplay);  //This will display all data when the tags is an empty array.

CodePudding user response：

// Get a hook function
const {
  useState,
  useRef,
  useEffect
} = React;

const Example = () => {
    const data = [{
        id: 1,
        name: "Mike",
        city: "philps",
        state: "New York"
      },
      {
        id: 2,
        name: "Steve",
        city: "Square",
        state: "Chicago"
      },
      {
        id: 3,
        name: "Jhon",
        city: "market",
        state: "New York"
      },
      {
        id: 4,
        name: "philps",
        city: "booket",
        state: "Texas"
      },
      {
        id: 5,
        name: "smith",
        city: "brookfield",
        state: "Florida"
      },
      {
        id: 6,
        name: "Broom",
        city: "old street",
        state: "Florida"
      },
    ];
    const [FilteredData, setFilteredData] = useState([]);
    const [Tags, setTags] = useState([]);
    const selectRef = useRef();

    useEffect(() => {
      if (Tags.length !== 0) {
        setFilteredData(data.filter(item => Tags.includes(item.state)))
      } else {
        setFilteredData([...data]);
      }
    }, [Tags]);

    const OnAddTag = () => {
      if (!Tags.includes(selectRef.current.value)) {
        setTags((prev) => [...prev, selectRef.current.value]);
      }
    };
    const OnRemoveTag = () => {

      const tags = [...Tags]
      const index = tags.indexOf(selectRef.current.value)
      if (index > -1) {
        tags.splice(tags.indexOf(selectRef.current.value), 1)
      }
      setTags(tags)
    };


    const List = FilteredData.map((item) => < li key = {
        item.id
      } > {
        `${item.name} - ${item.state}`
      } < /li>);
      return ( <
        div >
        <
        div >
        <
        button onClick = {
          OnAddTag
        } > Add < /button> <
        select ref = {
          selectRef
        } >
        <
        option > select < /option> <
        option value = {
          "New York"
        } > New York < /option> <
        option value = {
          "Texas"
        } > Texas < /option> <
        option value = {
          "Florida"
        } > Florida < /option> < /
        select >

        <
        button onClick = {
          OnRemoveTag
        } > Remove < /button> < /
        div >
        <
        div > Tags = [{
          Tags
        }] < /div> <
        ul > {
          List
        } < /ul> < /
        div >
      );

    };

    // Render it
    ReactDOM.createRoot(
      document.getElementById("root")
    ).render( <
      Example / >
    );

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>