How to retrieve a react component value - reactjs

Question

I'm trying to make my own custom input[type='text'] on React, with my own effects.
To do that, I created my component:
Textbox.js
import React from "react";
class Textbox extends React.Component {
constructor(props) {
super();
this.state = {
inputValue: props.value,
fieldActive: false,
label: props.label,
placeholder: props.placeholder,
type: props.type,
maxLength: props.maxLength,
error: false,
required: props.required,
inputChange: props.onChange,
id: props.id,
valid: !props.required,
submitted: props.submitted,
_value: props.value,
updated: false
};
//console.log(this.props);
this.updateInputValue = this.updateInputValue.bind(this);
this.activateField = this.activateField.bind(this);
this.disableFocus = this.disableFocus.bind(this);
}
componentWillReceiveProps(nextProps) {
this.setState({
fieldActive: (nextProps.value != ''),
inputValue: nextProps.value
});
}
componentWillUpdate(nextProps, nextState) {
//console.log(nextState.inputValue);
if(/*this.state.inputValue != this.props.value*/ this.props.value != '' && !this.state.updated ){
this.setState({
inputValue: nextProps.value,//this.props.value,
updated: true,
fieldActive: true
});
}
}
componentDidUpdate(prevProps) {
//console.log('updating value: ' + prevProps.submitted);
if (this.props.submitted !== undefined) {
if (this.props.submitted !== prevProps.submitted) {
if(!this.state.required) return;
this.setState({
error: this.state.required && this.state.inputValue == ""
});
}
}
}
activateField() {
this.setState({
fieldActive: true
});
}
disableFocus(e) {
if (e.target.value == "") {
this.setState({
fieldActive: false,
error: this.state.required,
valid: !this.state.required
});
} else {
this.setState({
error: false
});
if (this.state.type == "email") {
this.setState({
error: !/^[a-zA-Z0-9]+#[a-zA-Z0-9]+\.[A-Za-z]+$/.test(e.target.value)
});
}
}
}
updateInputValue(e) {
//console.log('writing: ' + e.target.value);
this.setState({
inputValue: e.target.value,
submitted: false,
});
//this.props.value = e.target.value
if (this.state.inputChange != undefined && this.state.inputChange != null)
this.state.inputChange(e.target.id, e.target.value, this.state.valid);
this.activateField(e);
e.preventDefault();
}
render() {
return (
<div className="form-group field-group">
<label
htmlFor=""
className={
this.state.fieldActive
? this.state.error
? "field-active form-label floating error"
: "field-active form-label floating"
: "form-label floating hide"
}
>
{this.props.label}
</label>
<input
className={
this.state.error
? "form-input floating-label error"
: "form-input floating-label"
}
type={this.props.type}
placeholder={this.props.placeholder}
maxLength={this.props.maxLength}
value={this.state.inputValue}
name={this.props.id}
id={this.props.id}
autoComplete="off"
onFocus={this.activateField}
onBlur={this.disableFocus}
onChange={this.updateInputValue}
/>
<label
className={this.state.error ? "error" : "error hide"}
style={{ fontSize: 14, fontWeight: 400 }}
>
You must complete this field
</label>
</div>
);
}
}
export default Textbox;
myjsfile.js
constructor(props) {
super(props);
this.state = {
clients: [],
client: {
name: "",
},
};
//... More methods and properties
<Textbox
label="Client name"
placeholder="Client name / Customer"
id="name"
type="text"
required={true}
value={this.state.client.name}
maxLength="20"
//onChange={this.handleChange}
submitted={this.state.submitted}
/>
In my file, I'm using Textbox as a component, but each time that I want to retrieve the value inside the Textbox I get empty.
What am I doing wrong? Why the value is not updating? How can I solve it?