Object with similar attribute names loop, React-CodePudding

I have object with attributes like tabletA, tabletB, tabletC, containing allways string. The same object contains other attributes as well, like company, phone.

My goal is to look at attributes in one line, and display only tablet attributes, where are strings, with values.

So I imagine code to look like something like this:

{referenceTexts.[tablet].length > 0 && (
    <div>
     referenceTexts.[tablet]
    </div>
 )}

CodePudding user response：

{Object.entries(referenceTexts)
  .filter(([key, val]) => key.startsWith('tablet') && val.length > 0)
  .map(([_, val]) => (
    <div>{val}</div>
 ))}

CodePudding user response：

const tabletValues = Object.keys(referenceTexts)
   // get keys that start with "tablet"
   .filter(key => key.startsWith('tablet'))
   // get their values
   .map(key => referenceTexts[key])
   // get only values that are not empty
   .filter(value => (value || '').length > 0);

Then

{tabletValues.map(value => <div>{value}</div>)}

Note that the order of the values is undefined so you might want to add some kind of sorting.

CodePudding user response：

hopefully I got you. You want something like this :

{Object.keys(referenceTexts).map((key) => {
        if (key.substr(0, 6) === "tablet") {
          return <h1>{referenceTexts[key]}</h1>;
        }
 })}