How to filter an object for display based on key names in React?

Question

I have a state object that includes multiple address lines

{
  name: "fred",
  homeStreet1: "1 main st"
  homeStreet2: "Apt A"
}

How can I iterate over the address lines to display them in React?

I tried:

{state.filter(entry => { entry.key.match(/homeStreet/) &&
   <tr key={entry.value}>
    <td><label htmlFor={entry.key}/>
    <input
      type="text"
      id={`homeStreet${entry.value + 1}`}
      value={entry.value}
      size="20"
      onChange={(e) => updateState(e.target.id, e.target.value )} />
    </td>
  </tr >;
})}

but I get

Expected an assignment or function call and instead saw an expression  no-unused-expressions

Answer 1

Object.entries (doc) would fulfill your way of thinking with object's key-value pairs

The Object.entries() method returns an array of a given object's own enumerable string-keyed property [key, value] pairs

const obj = {
  name: 'fred',
  homeStreet1: '1 main st',
  homeStreet2: 'Apt A'
}

Object.entries(obj).map(([key, value]) => {
  if (key.match(/homeStreet/)) {
    console.log(key, value)
    // Do what you want then..
  }
})

Answer 2

Supposing that all the addresses lines are home<something> you could do something like:

let state = {
  name: "fred",
  homeStreet1: "1 main st",
  homeStreet2: "Apt A"
}

let filtered_keys = (obj, filter) => {
  let key, keys = []
  for (key in obj)
    if (obj.hasOwnProperty(key) && filter.test(key))
      keys.push(key)
  return keys
}

let filteredAddress = filtered_keys(state, /home/)
console.log(filteredAddress)
filteredAddress.forEach(el => {
   console.log(state[el])
})