We Keep Coding

synthetic event error is occured when trying to access form data

i have the following code in my component of react
import React, { useState } from "react";
function CreateArea() {
var [items,setitems]=useState({title:{},content:""});
function updatef(event){
console.log(event);
}
return (
<div>
<form>
<input name="title" onChange={updatef} placeholder="Title" />
<textarea name="content" onChange={updatef} placeholder="Take a note..." rows="3" />
<button>Add</button>
</form>
</div>
);
}
export default CreateArea;
As you can see i am trying to trigger updatef function if user is typing in the input box and textarea but i am getting the following warning
Warning: This synthetic event is reused for performance reasons. If
you're seeing this, you're accessing the property target on a
released/nullified synthetic event. This is set to null. If you must
keep the original synthetic event around, use event.persist().
also my event.target is coming as null
I want to access the input and text area values and store them but event.target is being set to null
any help?

You probably need to declare an arrow function as your handler:
<input name="title" onChange={e => updatef(e)} placeholder="Title" />
<textarea name="content" onChange={e => updatef(e)} placeholder="Take a note..." rows="3" />

The below code will help you out, use the event.persist(), that will remove the synthetic event error
onChange={(event) => {
event.persist();
setState((preValue) => {
return { ...preValue, input: e.target.value };
});
}}

Why after onClick my hook is failing to update the state?

I have defined a constant to use UseState Hook in ReactJS by:
const [inputValue, setInputValue] = useState("")
Using the inputValue for my form in a way:
<form
data-testid="form"
onSubmit={e => {
e.preventDefault();
setLogFilters({
queryText: inputValue
});
}}
>
I am able to input string in my form using the snippet below:
<Input
name="input1"
type="text"
onChange={e => setInputValue(e.target.value)}
/>
I now have a button which onclick should clear the string input in the form:
<Button
onClick={() => {
setInputValue("");
}}
>
But the form retains the original string and the state is not set to null string. What is wrong? why is the hook not able to update the state?

As mention by #Corentin when you have any input field and you want its value to get change when you write something, you need to have a state for that, just like you have a state with name inputValue
you need to bind this state with your input through value prop i.e
<Input
//This will change your input when your state will be updated
value = {inputValue}
name="input1"
type="text"
onChange={e => setInputValue(e.target.value)}
/>
Now, the value will get change when you will set your inputValue state.

your input field does not have the value attribute, it should be like below:
<Input
name="input1"
type="text"
value={inputValue}
onChange={e => setInputValue(e.target.value)}
/>

For change the value of an input with hooks, you've to initialize your state like "value" in your input.
Example :
function onClick () {
setYourState('Blabla')
}
<input placeholder='Enter blabla' value={yourState} onChange={(e) => setYourState(e.target.value)}></input>

Can value of input box be set to to empty string on clicking submit button when the input is in a stateless functional component?

How to clear the value inside the input in function Admin after I click the "Add" button? Should i use another class based component instead of a functional component?
I have set the value of one of the input box as : value={props.item} and in the this.setState I update the value of item as item:"".
AddInfo(info){
let s = this.state.products;
let obj ={name:""};
obj.name=info.productName;
s.push(obj);
this.setState({
products:s,
item:"" //Here i set the value of item equal to an empty string.
})
console.log(this.state.products);
}
function Admin(props){
let productName="";
return (
<div>
<input type="text" required placeholder="Product Name" onChange={(e)=>{productName=e.target.value}} value={props.item}></input><br/>
<button type="Submit" onClick{(e)=>props.AddInfo({productName})}>Add</button>
</div>
)
}

You have to save your input within a local state of the input function:
AddInfo(info){
let s = this.state.products;
let obj ={name:""};
obj.name=info.productName;
s.push(obj);
this.setState({
products:s,
})
console.log(this.state.products);
}
function Admin(props){
const [productName, setProductName] = useState('');
return (
<div>
<input type="text" required placeholder="Product Name" onChange={(e)=> setProductName(e.target.value) value={productName}></input><br/>
<button type="Submit" onClick{(e)=> {props.AddInfo({productName}); setProductName('')}}>Add</button>
</div>
)
}
This will work for you, since you are not mutating the productName variable anymore but now you are saving it in a local state of that input function.
Hope this helps!

Admin is like a form, and the main decision you have to make is rather you want it to be controlled (info is stored in stated, and state is reflected in the ui), or uncontrolled (info is taken from the dom once 'Add' is clicked.
Since you want to empty the input once 'Add' is clicked it makes sense to make this component controlled.
The next decision is rather you want it to be a functional component, or a class component. In nowadays it doesn't really matter (functional components can now use state with the state hook).
To store state in you functional component use React's useState hook.
function Admin({addInfo}){
const [productName, setProductName] = useState(")
return (
<div>
<input
type="text"
placeholder="Product Name"
onChange={(e)=>{
setProductName(e.target.value)
}
value={prodcutName}>
</input>
<button
onClick{(e)=>{
props.addInfo({productName})
setProductName("") // Will set the input to an empty string
}
>
Add
</button>
</div>
)
}

Maxlength does not work React Js

I have an input with React, but maxlength does not work. Does anyone know how to solve this?
This is handleChangeInput
handleChangeInput(input) {
this.setState({
...this.state,
form: {
...this.state.form,
[input.target.name]: input.target.value
}
})
}
And this is my input:
<div className="input-field col s12 m6 l6">
<input onChange={this.handleChangeInput} value={this.state.form.message} type="text" className="phone validate" name="phone" maxlength="11"/>
<label for="telefone">Telefone</label>
</div>

Property and attribute names are generally camelCase in React, maxLength works.
<input
onChange={this.handleChangeInput}
value={this.state.form.message}
type="text"
className="phone validate"
name="phone"
maxLength="11"
/>
However, you can still override this option if you give the input a value longer than maxLength. The only way around this is to check the length of the value in the callback, and truncate it.
Example
class App extends React.Component {
state = { form: { message: "" } };
handleChangeInput = event => {
const { value, maxLength } = event.target;
const message = value.slice(0, maxLength);
this.setState({
form: {
message
}
});
};
render() {
return (
<input
onChange={this.handleChangeInput}
value={this.state.form.message}
type="text"
className="phone validate"
name="phone"
maxLength="11"
/>
);
}
}

for maxLength to work, type has to be 'text' (most people are probably putting number)

You need to pass maxLength value as a number.
<input
onChange={this.handleChangeInput}
value={this.state.form.message}
type="text"
className="phone validate"
name="phone"
maxLength={11}
/>

inputProps = {{maxLength:6}}
variant="outlined"

Simply do like this in your handleOnChange Function:
handlePasswordChange = (e) => {
if(e.target.value <= 11){
this.setState({
[e.target.name]: e.target.value
});
}
};

For the people who's input type is number, this code will work
handlePhone(object) {
if (object.target.value.length > object.target.maxLength) {
object.target.value = object.target.value.slice(0, object.target.maxLength)
this.setState({ phone: object.target.value });
}
}
<input
placeholder="Phone Number"
onChange={this.handlePhone}
type = "number" maxLength = "10"
/>

<input
id="ZIPCode"
className="form-control"
type="text"
maxLength={10} // this is the important line
></input>
React uses camelCased html attributes, so maxlength would then be maxLength

For anybody using a reactstrap input, like other properties it uses (e.g. colSpan) it needs both camelCase naming and a number passing to it (e.g. maxLength={250}), rather than a string. I have found passing a string will work but React will complain about it.

React : Grab change on input value done by jQuery

Not a fan of mixing jQuery with React but I liked a color picker called Farbstastic so I embedded it as a component in my React app. There is an input field as type hidden where the value gets changed when user interact the with color picker. I want to grab the value in React using onChange event.
This is my react code to grab the change:
class Color extends Component {
render() {
return (
<div>
<label htmlFor="color">Color:</label>
<input type="hidden" id="color" name="color" value="#123456" onChange={event => { console.log(event.target.value);} }/>
<div id="picker"></div>
</div>
)
}
}
The problem is it does not grab the change on value by jQuery.

You use case is called uncontrolled components in react world.
https://reactjs.org/docs/uncontrolled-components.html
So basically you have to use ref to access value of this input in your react class methods.
<input type="hidden" id="color" name="color" value="#123456"
ref={(input) => this.colorCodeInput = input}/>
<div id="picker"></div>
Now in your submit function you can access the value set like
onSubmit() {
let colorCode = this.colorCodeInput.value.
}