CODEWITHSUNDEEP
arraysreactjsreact-redux
jazzoria
jazzoria

Reputation: 139

Generating text box for each values in array using reactjs

Hi Im trying my hands on reactjs, I have an array and to the array Im trying to generate textbox for each element. So that each element is renamed and saved to the new array, which is used for other purpose. The issue I face here is Im able to generate the text boxes for each element but Im not able edit it. So Im looking for help.

class setNewname extends Component {

    constructor(props) {
        super(props);

        this.state = {
            oldArr: [apple,orange,grape],
            tabName: [],
        };
        this.onNameEdited = this.onNameEdited.bind(this);
    }

    onNameEdited(event) {
        this.state.tabVal = event.target.value;
        var tabName= this.state.tabName.concat(this.state.tabVal);
        debugger;
    };

    render() {
        return (
            <div>
                {this.state.tName.map(x =>
                   {x} 

                    <input type="text" label={x} key={x.toString()}
                        onChange={this.onNameEdited} />)}
            </div>

        );
    }
}

function bindAppStateToProps(applicationState) {
    debugger;
    return {
        tableName: applicationState.TableName.saveTable,
    };
}


export default connect(bindAppStateToProps)(setNewname);

Upvotes: 0

Views: 1282

Answers (1)

tomr
tomr

Reputation: 171

Your onChange function should set the state like this:

this.setState({tabVal: event.target.value})

Then you have to set the value of the input:

<input type="text" label={x} key={x.toString()} value={this.state.tabVal} onChange={this.onNameEdited} />)}

Upvotes: 1

Related Questions