Curly braces inside curly braces in React

Question

I have presentational component in React. And with products.some i am trying to check if any item inside products is checked. And if some item is checked, render parent block for RequestedProduct component. I know that the problem is a second pair of curly braces as React think it's a prop. Is there another way to do this?

const Requested = ({ products, getCurrentTime }) => (
  <div className="pepper-pin-body-tab requested-tab">
    <div className="pepper-pin-body-tab-title">
      Запрошенные
    </div>
    <div className="pepper-pin-body-tab-indicator" />
    {products.some(product => product.checked) ? (
      <div className="requested-tab-list-requested">
        <div className="requested-tab-list-requested-time">
          {getCurrentTime()}
        </div>
        {products.filter((product, key) => {
          if (product.checked) {
            return (
              <RequestedProduct
                key={key}
                title={product.title}
              />
            );
          }
        })}
      </div>
    ) : null}
  </div>
);

Answer 1

Issue is, filter will not return the custom element/value, it will always return the array element for which you return true from filter body.

Solution is, use only map or combination of filter and map.

Using map:

{
    products.map((product, key) => product.checked ? 
        <RequestedProduct key={key} title={product.title} /> 
        : null
}

Using combination of filter and map:

{
    products
    .filter(product => product.checked)
    .map((product, key) => <RequestedProduct key={key} title={product.title}/>)
}

Check this snippet, you will get a better idea:

 const arr = [ {a: 1}, {a: 2}, {a: 3}, {a: 4} ]; const afterFilter = arr.filter((el,i) => { if(i%2) { return `Hello world ${i}`; } }); // it will print the array items, not the Hello World string console.log('afterFilter', afterFilter);

Answer 2

I'd recomment splitting the code a bit, which makes it intent a lot clearer. You'll end up with the following (for example), which should not be triggering errors.

The main problem is in the unintended side effects of the filter, whereas you most likely want to use a filter and a map . That makes the intent to another developer much clearer.

const contents = (products, getCurrentTime) => (
    const filtered = products.filter(product => product.checked);
    <div className="requested-tab-list-requested">
        <div className="requested-tab-list-requested-time">
            {getCurrentTime()}
        </div>
        {filtered.map((product, key) => <RequestedProduct key={key} title={product.title}/>)}
    </div>  
);

const Requested = ({products, getCurrentTime}) => {
    const isAnythingChecked = products.some(product => product.checked);

    return <div className="pepper-pin-body-tab requested-tab">
        <div className="pepper-pin-body-tab-title">
            Запрошенные
        </div>
        <div className="pepper-pin-body-tab-indicator"/>
        {isAnythingChecked ? contents(products, getCurrentTime) : null}
    </div>
};