Input key loses focus on typing and does not show input value in react

Question

This is my file that contains the input field.

class IndividualPsid extends Component {
  constructor(props) {
    super(props);
    this.state = {
        editData: false,
        newSkuid: this.props.SkuId
    }
    this.updateState = this.updateState.bind(this);
 }

 componentWillReceiveProps(nextProps) {
    this.setState({ editData: nextProps.editingProp });
    this.render();
 }

updateState(e) {
    const psid = e.target.value;
    this.setState({ newSkuid: psid }, () => {
        this.props.onPsidChange(this.props.id, this.state.newSkuid);
    });
}

render() {
    let member = '';
    if (this.props.editingProp) {
        member = (
            <div>
                <input type="text" id="skuids" value={this.state.newSkuid} key={'dkj' + uuidv4()} onChange={this.updateState}
                    className="skuid col-xs-7" />
            </div>
        )
    }
    else {
        member = (
            <div key={this.props.SkuId} id="skuids" className="skuid col-xs-7" >{this.props.SkuId}</div>
        )
    }
    return (
        <div className="row" >
            <div className="skuname col-xs-5">{this.props.SkuName}</div>
            {member}
        </div>);
}

This is my file that passes props to the above file.

class Category extends Component {
 constructor(props) {
    super(props);
    this.state = {
        editing: false,
        text: 'EDIT',
        changedSkus: []
    }
    this.edit = this.edit.bind(this);
    this.onPsidChange = this.onPsidChange.bind(this);
}

onPsidChange(id, psid) {
    const changedSkus = this.state.changedSkus.filter(
        (sku) => (sku.brandProductExternalSkuId != psid)
    );
    changedSkus.push({
        brandProductExternalSkuId: psid,
        brandProductSkuId: id
    });
    this.setState({
        changedSkus: changedSkus
    })
}

edit(skuList) {
    if (this.state.editing == false) {
        this.setState({
            text: 'SAVE',
            editing: true
        });
    }
    else {
        this.setState({
            text: 'EDIT',
            editing: false
        });
        this.props.edit_menu_items_api(this.state.changedSkus);
    }
    this.render();
}

render() {

    return (
        <div className="show-grid row category-row">
            <div className="col-md-8 text-left category">
                <b>{this.props.categoryData.categoryName}</b>
            </div>
            {this.props.categoryData.productList.length > 0 &&
                <div className="col-md-4 text-right">
                    <button className={this.state.text == "EDIT" ? "edit" : "save"} onClick={() =>
                        this.edit(this.props.categoryData.productList[0].brandProductSkuList)}>
                        {this.state.text}</button>
                </div>
            }
        </div>
    )
}

So what happens is whenever I click on EDIT button the field becomes editable.And when I type something in the input box ,it doesn't show the typed number but shows when I click save. Also it loses focus after every typed in number.How should I solve this.The edit func is defined in the Category component that onclick save calls the redux function.

Answer 1

So my input component was re-rendering due to which,it was not working properly.Only way to solve this was to write it outside the render.So I used componentWillMount for that. Here's my new code for that.

class IndividualPsid extends Component {
 constructor(props) {
    super(props);
    this.state = {
        editData: false,
        newSkuid: this.props.SkuId
    }
    this.updateState = this.updateState.bind(this);
    this.member = null;
 }
 updateState(e) {
    const psid = e.target.value;
    this.setState({ newSkuid: psid });
 }
 componentWillMount() {
    this.member = <div key={this.props.SkuId + uuidv4()} className="skuid col-xs-7" >{this.props.SkuId}</div>
}

componentWillReceiveProps(nextProps) {
    if (this.props.editingProp !== nextProps.editingProp && nextProps.editingProp) {
        this.member = <div>
            <input defaultValue={this.state.newSkuid} key={this.props.SkuId + uuidv4()} onChange={this.updateState}
                onBlur={() => { this.props.onPsidChange(this.props.id, this.state.newSkuid) }} className="skuid col-xs-7" />
        </div>
    } else if (this.props.editingProp !== nextProps.editingProp && !nextProps.editingProp) {
        this.member = <div key={this.props.SkuId + uuidv4()} className="skuid col-xs-7" >{this.props.SkuId}</div>
    }
    this.setState({ editData: nextProps.editingProp });

 }
  render() {
    return (
        <div className="row" >
            <div className="skuname col-xs-5">{this.props.SkuName}</div>
            {this.member}
        </div>);
 }
  }

I used the onBlur event in the input box so that the input box does not lose focus untill the user is typing.