Objects are not valid as a React child (found: object with keys {arr}). If you meant to render a collection of children, use an array instead

Question

searchf.jsx

import emojipedia from "./emojipedia";

function Search(props) {
    var arr = [];
    emojipedia.forEach((element) => {
        var flag = 0;
        element.keywords.forEach((key) => {
            if (key.toLowerCase() === props.toLowerCase()) {
                flag = 1;
            }
        });
        if (flag === 1) {
            arr.push(element);
        }
    });
    console.log(arr, typeof arr);
    return { arr };
}
export default Search;

App.js

var arr = [];
{ arr.map((obj) => {
           <button onClick={() => {
                            console.log(obj.emoji);
                            setEmo(obj.emoji);
                            document.getElementsByClassName("cls")[0].style.display =
                            "block";
                        }}
                        className="emoji"
                        >
                        {obj.emoji}
                        </button>;
                    })}

Search is a function in searchf.jsx to search all the emojis from the data that has the passed argument as keyword. and returns the array of objects. but I am unable to map through the array error at arr.map in app.js

Answer 1

You are returning an Object instead of an Array (Last statement in your search function)

Just use

return arr;

Instead of

return { arr };

Your error explains it as well: Objects are not valid as a React child (found: object with keys {arr})

.map only works with arrays