Couple of problems:

1. You need to explicitly add a return statement in the callback function of the map() method

   return <li>{cardData[keys].name}</li>
   

2. cardData seems to be an array. If that's the case, then no need to use Object.keys(...). Call map() method directly on the array

   {cardData.map((obj) => {
      return <li>{obj.name}</li>      
   })}
   

   Alternate option is to remove the curly brackets. This will allow you to remove the return keyword and the li will be returned implicitly

   {cardData.map((obj) => <li>{obj.name}</li>)}
   

Note: Don't forget to add the key prop on the li element:

{cardData.map((obj) => (
   <li key={obj.id}>{obj.name}</li>
))}

Edit

If cardData is not an array, and is just an object of the following form:

{
    "postId": 1,
    "id": 1,
    "name": "id labore ex et quam laborum",
    ...
}

then use the following code:

{Object.keys(cardData).map(key => {
    return <li>{cardData[key].name}</li>      
})}

OR use the implicit return by removing the curly brackets:

{Object.keys(cardData).map(key => ( 
    <li>{cardData[key].name}</li>      
))}

Use the JavaScript array find function:

const matched = this.props.notifications.data.find(item => item.value === "targetDate");

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

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.

Because the initial value of analysisData is false. So JSON.parse(analysisData.custodians) is return undefined and map will doesn't work.

You can you optional chaining to check in return:

{JSON.parse(analysisData.custodians)?.map((childData) => {
    return (
        <div>
            {console.log(childData.NAME)}
        </div>
    )}
)}

State is an object, so you can access any value by:

this.state[key]

Use any loop map, forEach etc to iterate the array and access the value by this.state[key], like this:

a.forEach(el => console.log(this.state[el]))

Check this snippet:

let state = {a: 1, b: 2};
let arr = ['a', 'b'];

let values = arr.map(el => state[el])

console.log(values);

What you need here is recursion.

Though, there is something missing in your design, you are not defining the exact condition for when should the program actually extract the value.

For example, lets define that if a value of a given key is a string, then we will render it to the page.

Such condition will look something like this:

if (typeof data[key] === 'string' || data[key] instanceof String)

Then with this decision, you can write a function that will take a data object and recursively will go over the object's keys, based on the condition above, it will return the value Or another call to the same function with the value as the new data object.

The function will look something along this block of code:

function generateData(data) {
  const newData = Object.keys(data).reduce((result, currentKey) => {
    if (typeof data[currentKey] === 'string' || data[currentKey] instanceof String) {
      result.push(currentKey);
    } else {
      const nested = generateData(data[currentKey]);
      result.push(...nested);
    }
    return result;
  }, []);
  return newData;
}

I'm using .reduce here to build a new array. and as mentioned above, i will push to the new array either the key or the result of a recursive call to the function with the value as the new data object, of course based on the condition mentioned above.
Note, that the recursive call will return an array, so i'm using the spread syntax to extract it's members.

Now, we want our key and value to get rendered to the DOM.
So instead to just push the key or value, we can push an element.

Here is a full running example:

const myData = {
  "key1": "value1",
  "key2": "value2",
  "key3": "value3",
  "key4": {
    "k1": "val1",
    "k2": {
      "p1": "v1",
      "p2": "v2",
      "p3": "v3"
    }
  }
}

const generateElement = (key,value) => {
  return (
    <div key={key} className="row">
      <div className="col-xs-6 ins-label">{key}</div>
      <div className="col-xs-6">{value}</div>
    </div>
  );
}

function generateData(data) {
  const newData = Object.keys(data).reduce((result, currentKey) => {
    if (typeof data[currentKey] === 'string' || data[currentKey] instanceof String) {
      const elementToPush = generateElement(currentKey, data[currentKey]);
      result.push(elementToPush);
    } else {
      const nested = generateData(data[currentKey]);
      result.push(...nested);
    }
    return result;
  }, []);
  return newData;
}

class App extends React.Component {
  render() {
  const { data } = this.props;
    return (
      <div>
        {generateData(data)}        
      </div>
    )
  }
}

ReactDOM.render(<App data={myData} />, document.getElementById('root'));

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

You can filter the questions by a particular key of the object first and then do the map. Let's say id with value 1.

return (
    <div>
        {questions
            .filter(({ id }) => id === "1")
            .map(question => (
                <Question
                    key={question.id}
                    questionNum={question.id}
                    title={question.title}
                    answers={question.answers}
                />
            ))}
    </div>
)

If you get an object like the following from console logging destructured props:

{
  dashboardinfo: {goals: [{goal: 20000}]}
}

You need to use props.dashboardinfo.goals[0].goal to get the value.

Object.keys(options.object).map((key, i) => (
              <option key={i} value={key}>
               {options.object[key]}
              </option>
            )

In this way, without knowing the keys, you can access all of then, looping and access the values.

Normally an option would have a value too - does this work?

const options = this.state.data.map(d => <Option key={d.value} value={d.value}>{d.text}</Option>)

The best way to get the key attribute value that you set is to just pass it as another attribute as well that has meaning. For example, I often do this:

const userListItems = users.map(user => {
  return <UserListItem
    key={ user.id }
    id={ user.id }
    name={ user.name }
  });

or in your case:

this.props.albums.map(function(albumDetails) {
  return (<div className="artistDetail" key={albumDetails.id} data-id={ albumDetails.id } onClick={component.getTracks}>
      <img src={albumDetails.imageSrc} />
      <p><a href="#" >{albumDetails.name}</a></p>
  </div>)

It seems redundant, but I think its more explicit because key is a purely react implementation concept, which could mean something different than id, even though I almost always use unique IDs as my key values. If you want to have id when you reference the object, just pass it in.