How to pass an objects array to a component prop in ReactJS excluding objects whose key-value pairs have empty strings

Question

In a ReactJS project I have the following object array:

const arr = [
    {
        key1: 1,
        key2: 'value1'
    },
    {
        key1: 2,
        key2: 'value2'
    },
    {
        key1: 3,
        key2: ''    // empty string, therefore I do not want to pass this object in the array to be passed to the prop
    }
]

And I'm passing the above array to a prop as follows:

<Component
    Array={arr}
/>

Problem

I do not want to pass any object with key 'b' being an empty string (like the second object according to the example).

Is there any way that I can pass the rest of the objects as an array without the object whose key 'b' has an empty string?

Thank you so much. but I do not get why there are two ! operators? Could you please explain a little bit? — ShamaliF
– ShamaliF, Commented Apr 29, 2022 at 16:49

Som Shekhar Mukherjee · Accepted Answer · 2022-04-29 16:54:59Z

1

You can pass a filtered array to the component that doesn't contain objects where key2 is an empty string:

<Component
    Array={arr.filter(({key2}) => key2 !== "")}
/>

React example below:

function App() {
  const items = [
    { key1: 1, key2: "value1" },
    { key1: 2, key2: "value2" },
    { key1: 3, key2: "" },
  ];
  return <List items={items.filter(({ key2 }) => key2 !== "")} />;
}

function List({ items }) {
  return (
    <ul>
      {items.map((item) => (
        <li>{JSON.stringify(item, null, 2)}</li>
      ))}
    </ul>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>

edited Apr 29, 2022 at 16:54

answered Apr 29, 2022 at 16:48

Som Shekhar Mukherjee

8,1982 gold badges16 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to pass an objects array to a component prop in ReactJS excluding objects whose key-value pairs have empty strings

Problem

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Problem

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related