How to render .map() val and key as a prop outside of setState callback

I have this component which performs a post request and maps json data that I get in return. On this response I do setState and map the data in the callback. I do this because of setState's async nature.

I want to be able to use val and key outside of it's scope in render() but I'm not sure how to achieve this.

LoadCard:

class LoadCard extends Component {  constructor(props) {    super(props);    this.state = {      req: [],    }  }  componentDidMount() {    axios.post(hostname, {      request: "?request=getObjects"    })      .then(response => {        this.setState({          req: JSON.parse(response.data)        },          () => this.state.req.objects.map((val, key) => {            // after mapping what to do here?          })        );      })      .catch(error => {        console.log("Error: Card/componentDidMount: "+ error);      });  }  render() {    return (<Card key={key} title={val.name} /> /* use val and key here */    );  }}

In the component's render I want to be able to use val and key as a prop for Card component.

Card:

class Card extends Component {  render() {    return (<View key={this.props.key}><Text>{this.props.title}</Text></View>    );  }}

Edit to fit comment question:

The response data I get returned looks like this:

{"objects": [        {"zone_id_1": 151,"zone_id_2": null,"blocked": "Y","type_id": 1,"name": "Alarm chauffeurs@ON=100","output_value": 0,"object_id": 1,"input_value": 100,"last_changed": "2019-04-04T11:36:53","continuously_high_enabled": "N"        },        {"zone_id_1": 150,"zone_id_2": null,"blocked": "N","type_id": 1,"name": "Alarm office@ON=0","output_value": 0,"object_id": 2,"input_value": 0,"last_changed": "2019-03-26T15:52:01","continuously_high_enabled": "N"        },    ]}