Use variable in .map function react

I am a new reacter. I have a problem when i use map and variables could you help me? i don't know how to input the variables in options like value={name.value}

const info = [
  { key: "닉네임", value: "name" },
  { key: "지역", value: "area" },
  { key: "생일", value: "birthday" },
  { key: "키", value: "tall" },
  { key: "몸매", value: "body" },
  { key: "직업", value: "job" },
  { key: "회사", value: "company" },
  { key: "학교", value: "school" },
  { key: "학력", value: "background" },
  { key: "종교", value: "religion" },
  { key: "흡연", value: "smoking" },
  { key: "카카오 아이디", value: "kakaoid" }
];

<Grid container spacing={3}>
            {info.map((info, index) => (
              <Grid item xs={12} sm={6} key={index}>
                <TextField
                  required
                  id={index}
                  name={info.value}
                  label={info.key}
                  value={}
                  onChange={}
                  fullWidth
                />
              </Grid>
            ))}
          </Grid>

I want to make it like that

<Grid item xs={12} sm={6} key={1}>
                <TextField
                  required
                  id={1}
                  name={"name"}
                  label={"닉네임"}
                  value={name.value}
                  onChange={name.onChange}
                  fullWidth
                />
              </Grid>

1 answer

  • answered 2019-11-08 13:54 Jerrin stephen

    If you want to set the value for the each text field .

    1. Define a state variable for each of the text-field (use name of the each text fields)and bind an on-change event.
    2. In on-change bind an this and get the name & value , based on on-change set the value to the name state for each text field
    3. Now pass the state to each of the text-field .

    You should aware of state an props in react , on-change events.

    For example

    constructor(props){
        super(props);
        this.state = {
            value:''
        }
    }
    
    inputchange = (event) =>{
        this.setState({
            value:event.target.value
        })
    }
    
    render(){
        return (
            <div className="todolist">
                <input type="text" value={this.state.value} onChange={this.inputchange}/>
                <input type="button" value="Submit" onClick={this.props.handleclick.bind(this,this.state.value)}/>
            </div>
        );
    }
    

    }