Question: In React I read that you should not use 'ref' and 'findDOMNode' for security reasons. (insecurely accessing native DOM Elements...)
Is there another way to set the focus manually in input fields?
You can try the following:
function manualFocus() {
document.getElementById("text").focus();
}
return (
<div className="App">
<input type="text" id="text" name="text"></input>
<input type="text2" id="text2" name="text2"></input>
<button type="button" onClick={() => manualFocus()}>Manual Focus</button>
</div>
);
I used the following code, but the text does not clear when I click the addbtn.
This is a reactjs project.
function Addpage() {
const[note, setnote] = useState("");
function textchange(e) {
setnote(e.target.value);
console.log(note);
};
function savenote(){
localStorage.setItem('savednotes', note);
setnote("");
};
return (
<>
<Headersmall/>
<br/>
<div className="addcard">
<h1>Add new note.</h1>
<div className="title">
<input type="text" className="titlebox" id="addtitle" placeholder="Title"/>
</div>
<br/>
<div className="note">
<textarea type="text" className="notebox" id="addtxt" placeholder="Note" onChange = {textchange}/>
</div>
<br/>
<button className="addbtn" id='addbtn' onClick = {savenote}>Save</button>
</div>
<br/>
</>
)
}
When you're setting the value of note as an empty string by doing setnote("") inside savenote() function, you ARE changing the value of the state variable note, but it doesn't reflect in the textarea because your textarea input doesn't have a value associated to it. Try adding value={note} which will mean that there will be a "set and fetch" relationship between the textarea and the 'note' state variable
<textarea
value={note}
type="text"
className="notebox"
id="addtxt"
placeholder="Note"
onChange={textchange}
>
I'm using React Hook Form library. https://react-hook-form.com
If it's a simple form like Student Name, and Student Age, the application is quite simple.
const { register, handleSubmit, formState: { errors } } = useForm();
I just create those two input fields and register them.
<div className="w-full flex flex-col mt-4">
<label>Name</label>
<input
type="text"
placeholder="Enter Name" {...register("name")}
/>
</div>
<div className="w-full flex flex-col mt-4">
<label>Age</label>
<input
type="text"
placeholder="Enter Age" {...register("age")}
/>
</div>
<div>
<button onClick={handleSubmit(submitData)}>
Update
</button>
</div>
The submitData function will get the formData which can be used. The handleSubmit binds the registered fields to formData
const submitData = async formData => {
console.log(formData)
}
The formData will look as below:
{"name":"test", "age":"27"}
My requirement is to make this form dynamic, by allowing me to add many students. I should be able to repeat a set of these fields with a button called "Add Student". Every time I add a new student, it should create a new row of these two fields where I can add new students names. finally, the output of the formData should look like an array of students:
[{"name":"test1", "age":27},{"name":"test2", "age":28},{"name":"test3", "age":29} ]
I can create the UI to add the new fields, but I don't know how to bind them to the formData in react hook form. In the documentation, I couldn't find how to do this with react hook form.
Please help.
I tried the following:
I created a state as follows:
const [items, setItems] = useState([0,1,2])
I can update this when I add/remove items.
Now, for the fields, I wrapped them into a map as follows:
{items.map(i => (
<div>
<div className="w-full flex flex-col mt-4">
<label>Name</label>
<input
type="text"
placeholder="Enter Name" {...register(`items[${i}].name`)}
/>
</div>
<div className="w-full flex flex-col mt-4">
<label>Age</label>
<input
type="text"
placeholder="Enter Age" {...register(`items[${i}].age`)}
/>
</div>
</div>
))}
This works.
I'm new to React, working through a ".Net core CRUD with React" tutorial and trying to tweak it along the way to suit my own needs.
The page I'm dealing with here is an Add/Edit entry page. It works fine for rendering a default form with default values but doesn't render anything if the values are collected from a fetch call.
The important details are below:
interface AddPortfolioProjectDataState {
title: string;
projectData: PortfolioProject;
loading: boolean;
}
The page is told to render as follows:
public render() {
let contents = this.state.loading
? <p><em>Loading Project...</em></p>
: this.renderCreateForm(this.state.projectData.type, this.state.projectData.tech);
return (
<div>
<h1>{this.state.title}</h1>
<h3>Project</h3>
<hr />
{contents}
</div>
)
}
If I want to add a new item, therefore using a default PortfolioProject object with default values, it works fine. However, if I want to edit an old entry, I have to grab it from the server, like so:
fetch('api/StuartAitkenWebsite/GetPortfolioProject/' + projID)
.then(response => response.json() as Promise<PortfolioProject>)
.then(data => {
this.setState({ title: "Edit", loading: false, projectData: data });
});
In the debug console on Firefox, I can see the whole server process runs smoothly:
GET http://localhost:62669/api/StuartAitkenWebsite/GetPortfolioProject/2
Response payload: {"id":2,"name":"Particles Sim","projectDate":"2017-01-01T00:00:00","projectDurationWeeks":1,"type":"Desktop App","tech":"C++, SFML","views":0,"creationDate":"2018-10-22T00:00:00","modifiedDate":"2018-10-22T00:00:00","status":1}`
It gives a JSON output of the payload too, which I can't easily copy-paste here so I'll give a screenshot:
There are no server error responses, no React errors, nothing.
But that's as far as it gets.
The page remains showing 'loading', even though the data is there and ready and wants to be displayed.
From this, I can gather that the final step of the fetch call is not succeeding, because this.setState({ title: "Edit", loading: false, projectData: data }); is clearly not having any effect on the page data.
I have other fetch calls which look exactly the same but work fine. I can't see what I'm missing here.
The one and the only difference I notice is this:
When I use this component to create a fresh 'Add Project' form, the state is set like so:
this.state = {
title: "Create",
loading: false,
projectData: new PortfolioProject,
};
But when I do it from the API, it's set like so:
this.setState({
title: "Edit",
loading: false,
projectData: data
});
The successful version uses this.state, and the unsuccessful version uses this.setState
I don't know what this can mean though. As I said, no errors are being thrown, I'm sticking to the tutorial format, and it works fine in other parts of the project.
Thanks.
UPDATE
I've put a log in at the point where renderCreateForm() is called. It seems setState is actually working. Therefore, the problem must be in renderCreateForm() so I'll post that code below. Sorry it's sort of large.
private renderCreateForm(projectTypes: string, projectTech: string) {
console.log(this.state.loading); // "false"
console.log(this.state.projectData); //"Object { id:1, name: "Muon Detector".. etc
//so the render is getting the data
return (
<form onSubmit={this.handleSave}>
<div className="form-group row" >
<input type="hidden" name="Id" value={this.state.projectData.id} />
</div>
<div className="form-group row" >
<label className=" control-label col-md-12" htmlFor="Name">Name</label>
<div className="col-md-4">
<input className="form-control" type="text" name="Name" defaultValue={this.state.projectData.name} required />
</div>
</div>
<div className="form-group row" >
<label className=" control-label col-md-12" htmlFor="ProjectDate">Project Date</label>
<div className="col-md-4">
<input className="form-control" type="date" name="ProjectDate" defaultValue={this.state.projectData.creationDate.toDateString()} required />
</div>
</div >
<div className="form-group row" >
<label className=" control-label col-md-12" htmlFor="ProjectDurationWeeks">Project Duration (weeks)</label>
<div className="col-md-4">
<input className="form-control" type="text" name="ProjectDurationWeeks" defaultValue={this.state.projectData.projectDurationWeeks.toString()} required />
</div>
</div >
<div className="form-group row" >
<label className=" control-label col-md-12" htmlFor="Type">Project Type</label>
<div className="col-md-4">
<input className="form-control" type="text" name="Type" defaultValue={this.state.projectData.type} required />
</div>
</div >
<div className="form-group row" >
<label className=" control-label col-md-12" htmlFor="Tech">Project Tech</label>
<div className="col-md-4">
<input className="form-control" type="text" name="Tech" defaultValue={this.state.projectData.tech} required />
</div>
</div >
<div className="form-group row" >
<input type="hidden" name="Views" value={this.state.projectData.views} />
</div>
<div className="form-group row" >
<input type="hidden" name="CreationDate" value={this.state.projectData.creationDate.toDateString()} />
</div>
<div className="form-group row" >
<input type="hidden" name="ModifiedDate" value={this.state.projectData.modifiedDate.toDateString()} />
</div>
<div className="form-group row" >
<input type="hidden" name="Status" value={this.state.projectData.status} />
</div>
<div className="form-group">
<button type="submit" className="btn btn-default">Save</button>
<button className="btn" onClick={this.handleCancel}>Cancel</button>
</div >
</form>
)
}
UPDATE 2: Added some screenshots showing how things appear so far.
How the main data table page looks:
If I click 'Add New', it works:
(the 'Save' option works there too. Data posts to the server and will list on the main portfolio page)
Clicking Edit for any of the entries does not work, it gets this far:
The 'Loading Project...' text comes from the render() call for this page, as is shown in the code posted at the top of this post.
The page is supposed to look exactly like the 'Create' page (2nd screenshot), but with the title being 'Edit', and with input values populated from the given data.
The solution was absurd, but may certainly help others...
The renderCreateForm() method (as shown in Update 1 of the post) was not working because of the .toDateString() method I was using in a few of the inputs.
I changed it to .toString() and now everything works.
For example, with an input like this:
<input className="form-control" type="date" name="ProjectDate" defaultValue={projectData.creationDate.toDateString()} required />
I changed it to this:
<input className="form-control" type="date" name="ProjectDate" defaultValue={projectData.creationDate.toString()} required />
Note the defaultValue property of the input.
Repeat for all cases of .ToDateString(), and it now works,
Amazing that this didn't bring up an error anywhere. I thought Typescript and all these various frameworks were supposed to get around the issue of Javascript silently failing like that. This has been my longest and most time-wasting 'silent fail error' ever, by a very long margin.
I want to create a form with React. I came up with the following:
export class Welcome extends Component {
constructor(props) {
super(props);
this.state = {
errors: []
};
}
render() {
return (
<form className="Welcome">
<div className="hello">{ this.props.sayHello() } I'm <Link to="/life">Marco</Link>! Welcome to my hood.</div>
<div className="question-box">
<div className="question"><span className="underline" >How much time do you have?</span></div>
<input className="minutes" type="text" value={this.props.minutes}
onChange={ (e) => this.props.updatePreferences("minutes", e.target.value) }/> minutes.
</div>
<div className="question-box">
<div className="question"><span className="underline">What do you fancy?</span></div>
<div className="answer">
<span className="choice">
<input type="checkbox" id="business" defaultChecked={ this.props.interests.business }/>
<label htmlFor="business">Business</label>
</span>
<span className="choice">
<input type="checkbox" id="code" defaultChecked={ this.props.interests.code }/>
<label htmlFor="code">Code</label>
</span>
<span className="choice">
<input type="checkbox" id="design" defaultChecked={ this.props.interests.design } />
<label htmlFor="design">Design</label>
</span>
</div>{/* end of .answer*/}
</div>{/* end .question-box*/}
<button>Show me magic</button>
<div className="errors">
No error. All good.
</div>
</form>
);
}
}
The onChange functions are in the parent component which also holds the state. But every time they are called the whole component is reloaded. Should the whole form be on a separate component or I should create separate components for each input?
React call render function in response of state change. So if component does not receive state change event it most probably will not rerendered but not necessarily. It may rernder anyway. ref