使用道具映射材质UI元素

Question

我正在尝试映射一些重要的ui项目以减少代码，但我还需要传递道具。我该怎么办？

例如，这可以正常工作：

 <TextField id="outlined-basic" label="First Name" variant="outlined" onChange={e => {
                this.setState({firstName: e.target.value})
              }}             
       />

但这不是因为状态firstName在props中传递：

     {[{ label: 'First Name', state: {firstName}].map((item, index) => (

       <TextField id="outlined-basic" label={item.label} variant="outlined" onChange={e => {
        this.setState({{item.state}: e.target.value}) }}  

       />
          ))}

  constructor(props: Readonly<{}>) {
    super(props);
    this.state = {
      firstName: '',
      lastName: '',
      phone: '',
      email: '',
      password: '',
    };
  }