Why my onInput doesn't work to change props.name? - reactjs

Question

I am learning React.js and I want to use onInput event to change the name, but it doesn't work.
Why is this happening? Do I write the wrong function(OnInputChange)?
Here is my app.js
import React, { Component } from "react";
import UserInput from "./Components/UserInput";
import UserOutput from "./Components/UserOutput";
class App extends Component {
state = {
Username: [{ name: "Jacky" }]
};
OnInputChange = event => {
this.setState({
Username: [{ name: "event.target.value" }]
});
};
render() {
return (
<div>
<UserInput OnInput={this.OnInputChange} />
<UserOutput name={this.state.Username[0].name} />
</div>
);
}
}
export default App;
my UserInput.js:
import React from "react";
const UserInput = () => {
return (
<div>
<input type="text" />
</div>
);
};
export default UserInput;
my UserOutput.js:
import React from "react";
const UserOutput = props => {
return (
<div>
<p>I am {props.name}</p>
<p>I am {props.name}</p>
</div>
);
};
export default UserOutput;

Answer 1

Changes:
1- You are not assigning onChange handler to input element in UserInput component, only passing that handler in props, automatically it will not work.
2- You are updating the value in state in wrong way, it should be name: event.target.value (not string).
Code:
const UserInput = (props) => {
return(
<div>
<input type="text" onChange={props.OnInput}></input>
</div>
);
}
OnInputChange = (event) => {
this.setState({
Username:[
{ name: event.target.value },
],
});
}
Working Code:
class App extends React.Component {
state = {
Username: [{ name: "Jacky" }]
};
OnInputChange = event => {
this.setState({
Username: [{ name: event.target.value }]
});
};
render() {
return (
<div>
<UserInput OnInput={this.OnInputChange} />
<UserOutput name={this.state.Username[0].name} />
</div>
);
}
}
const UserInput = (props) => {
return (
<div>
<input type="text" onChange={props.OnInput} />
</div>
);
};
const UserOutput = props => {
return (
<div>
<p>I am {props.name}</p>
<p>I am {props.name}</p>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='app' />

Answer 2

Your OnInput property is not passed down to your input component. It would have to be:
const UserInput = props => {
return(
<div>
<input type="text" onChange={props.OnInput} />
</div>
);
};
Your handler uses a literal string 'event.target.value', it must read the value:
Username: [{ name: event.target.value }],
Also, there is no need to wrap username in an array and another object, you can just use:
Username: event.target.value,
and access this.state.Username.
and initialize as
state = {
Username: "Jacky"
};

Answer 3

1.) You need to pass the event handler to your UserInput component.
const UserInput = ({ onChange }) => {...}
and then
<UserInput onChange={this.OnInputChange} />
2.) You need to use the passed event handler in your input onChange.
<input onChange={onChange} />
3.) You need to use event.target.value not 'event.target.value'.