Cannot map value of object seen in console

Question

My idea is to click on any of the buttons on the left navbar and whenever the name of the clicked button in the logos object matches any of the names in the items object within projects, then display those objects.

When I click on any of the buttons on the left, I transform that object's active property to true within the logos object. After I've filtered the values, I can see all of the correct values in the console, but I can't loop through them - with a for loop or a map. Oddly enough, when I write filteredValues[0] I am able to output that data to the screen but since I want multiple outputs for some of these clicked values, this is not an option. Any help is appreciated. Thank you!

These are the items that I can't loop through but am getting back when I console log them

These are my projects

These are my logos

 const Homepage = () => {

  const {state} = useContext(Context)
  const {projects,logos} = state;

  return (
    <>
  <div className="container">

    <Language />

    <div className="homepage">
          {logos.map(logo => {

            let filteredValues;

            if(logo.active == true){
              filteredValues = Object.values(projects).filter(({items}) => Object.values(items).includes(logo.name))

              filteredValues.map((val) =>{
                console.log(val)
                  return(
                        <div>{val.title}</div>
                      )
                    }) //end of filteredValues.map
                } //end of if
              }) // end of logos.map
            }
    </div>
  </div>
  </>
)}

Answer 1

An Array.map() would always return an Array of same length, irrespective of you return anything or not. If you do not return anything then it would be a sparse Array with empty values. Try returning only the array with the required data. Here I have just separated out the Logos logic in a separate variable.

render() {

    const Logos = (
        <div className="homepage">
            logos.reduce((acc, logo) => {
                if (logo.active) {
                    const filteredValues = Object.values(projects).filter(({items}) => Object.values(items).includes(logo.name));
                    Object.values(projects).forEach(({items}) => {
                        if (Object.values(items).includes(logo.name)) {
                            acc.push((<div>{val.title}</div>));
                        }
                    });
                }
                return acc
            }, [])
        </div>
    )

    return (
        <div className="container">
            <Language />
            {Logos}
        // rest of the code
    )
}