Access class function from rendered class object - reactjs

Question

I'm building a web application to manage some inputs from the user where I want to execute a function on every object in list that is rendered in react. The rendered objects are a different class than the one it is executed in.
import React, { Component } from "react";
import UserInput from "./UserInput";
class Layout extends Component {
objList = []
state = {
update: ""
}
anotherOne = async () => {
this.objList.push(<UserInput key={this.objList.length} />);
this.setState({update: ""});
}
submitCase = async () => {
for (var testCase in this.objList){
this.objList[0].submitInfo();
}
}
removeLatest = async () => {
this.list.pop();
this.setState({update: ""});
}
render(){
return(
<div id="container">
<div>
{ this.objList }
</div>
<div>
<button onClick={ this.anotherOne }>Another One</button>
<button onClick={ this.submitCase }>Submit</button>
</div>
</div>
);
}
}
export default Layout;
import React, { Component } from "react";
class UserInput extends Component {
state = {
name: "",
hairColor: "",
age: ""
}
submitInfo = async () => {
let path = '/dbmanager';
let apiName = "myApi"
let myInit = {
body: {categoryId: "Person", type: this.state.hairColor, data: JSON.stringify(this.state)},
contentType: 'application/json',
}
await API.post(apiName, path, myInit)
.then(response => {
// Add your code here
console.log(response);
})
.catch(error => {
console.log(error.response);
})
}
handleStateUpdate = (event) => {
var eName = event.target.name;
var eValue = event.target.value;
this.setState({[eName]: eValue});
console.log(event.target.value, event.target.name);
}
render(){
return(
<div id="container">
<div>
<label>Name: </label>
</div>
<textarea
type="text"
id="name"
name="name"
value={this.state.name}
onChange={this.handleStateUpdate}/>
<div>
<label>Hair Color: </label>
</div>
<textarea
type="text"
id="hairColor"
name="hairColor"
value={this.state.hairColor}
onChange={this.handleStateUpdate}/>
<div>
<label>Age: </label>
</div>
<textarea
type="text"
id="age"
name="age"
value={this.state.age}
onChange={this.handleStateUpdate}/>
</div>
);
}
}
export default UserInput;
I want the access to the class functions of UserInput so that I could submit the data from all of them on the same button press. Instead the objects are considered functions and are not executable in any means.