Like this:

{attributes.map((items, index) => {
  return (
    <ul key={index}>
    {Object.keys(items).map((key) => {
      return (
        <li key={key + index}>{key}:{items[key]}</li>
      )
    })}
    </ul>
  )
})}

forEach returns undefined. Use Array#map, which returns the JSX for each item in a new array.

JSX also requires the { } braces to evaluate text as JS.

Since you're creating a series of <h2> elements, React needs a key property to be set on the elements. Using keys from the object is sufficient since they're guaranteed to be unique strings. However, you might consider using a list (<ul> or <ol> parent element with <li> children) as an alternative to the header elements.

Also, you can use Object.entries to access both the key and value for each pair in an object in a slightly more intuitive way than statistics[key]:

const ControlSection = ({ statistics }) => {
    return (
        <div className='gameStatistics'>
            {
                Object.entries(statistics).map(([key, val]) => 
                    <h2 key={key}>{key}: {val}</h2>
                )
            }
        </div>
    );
};

this error indicates that you have question(s) where answers property is undefined or null. This results in a call Object.keys(undefined) which throws the error.

you need to add a safe guard for your code to not execute if that's the case:

     { questions[question].answers && Object.keys(questions[question].answers).map(
      (answer, index) => (
          console.log(questions[question].answers[answer].id_answer)
      )
     )}

Are you asking how to access properties with problematic names like -LMgzJGM78f0BHbPf8cc?

If so, instead of the object.property notation, you can access object properties by the property name using the square brackets syntax:

let obj = { color: 'blue' }

let prop = 'color'

console.log(obj.color);
console.log(obj['color']);
console.log(obj[prop]);

If not, please try to make more clear what your current problem is.

Use Object.entries method:

const petList = Object.entries(fido).map(([key,value])=>{
  return (
      <div>{key} : {value.toString()}</div>
  );
})

value.toString() for boolean types to render correctly

I had a similar situation where the object has no unique id.

I ended up generating ids for the items based on object references:

let curId = 1;
const ids = new WeakMap();

function getObjectId(object) {
  if (ids.has(object)) {
    return ids.get(object);
  } else {
    const id = String(curId++);
    ids.set(object, id);
    return id;
  }
}

// Usage
<RuleList rule={rule} key={getObjectId(rule)} />

I know you mentioned that you don't want to generate ids, but I thought I'd share this since it is generic and doesn't depend on any properties in your object.