I have the following fields in react js from which I should be able to perform crud operation with json file but have no idea how the Json file is created. Only I know is how to make UI. So, it would be very grateful if some would teach me how to do that. My code up to now:
App.js
import React from 'react'
const App = () => {
return (
<div>
<h3>Create Table</h3>
<hr />
<form className='form'>
<label className= "layout">Layout:</label>
<input
type= "text"
placeholder="select layout"
/>
<label className="name"> Name:</label>
<input
placeholder="Input Name"
/>
<label className = "capacity">Capacity:</label>
<input
type= "text"
placeholder="Enter Number Of Capacity"
/>
<label className= "status">Status:</label>
<input className= "input"
type="checkbox"
/>
<label className="Image">Image:</label>
<button className = "bttn">Choose File</button>
<p className = "para">No file choosen</p>
<button className= "btn">Create Table</button>
<button className= "button">Cancel</button>
</form>
</div>
)
}
export default App
All I want to know is how to create the fake data for all layouts, names, capacity and images to be able to choose and be able to display it in a table.
here is an example of crud in Jsonplaceholder: https://codesandbox.io/s/ey0w4?file=/src/index.js
I hope it's useful, if you faced any problem, let me know
Related
I downloaded and was running this React project. It compiled successfully and it works for me.
But see the following:
<div className="jumbotron">
<h4>Login</h4>
{ error && <div className="alert alert-danger" dangerouslySetInnerHTML={ this.createMarkup( error ) }/> }
<form onSubmit={ this.onFormSubmit }>
<label className="form-group">
Username:
<input
type="text"
className="form-control"
name="username"
value={ username }
onChange={ this.handleOnChange }
/>
</label>
<br/>
<label className="form-group">
Password:
<input
type="password"
className="form-control"
name="password"
value={ password }
onChange={ this.handleOnChange }
/>
</label>
<br/>
<button className="btn btn-primary mt-3" type="submit">Login</button>
<p>{ loading && <img src={Loader} className="loader" alt="Loader"/> }</p>
</form>
</div>
Where are btn-primary, alert-danger, etc. defined?
Thanks for any help.
The classes btn-primary and alert-danger are part of bootstrap, a framework for developing websites. You can find the docs for the buttons here; for the alerts here.
The bootstrap css file is loaded in the index.pug file.
link(rel="stylesheet", href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css")
Note that this has absolutely nothing to do with wordpress. Bootstrap is a completely independent framework and can, as such, be incorporated in any website whatsoever, wordpress or not.
I have a requirement to fetch and show the values in the form text box. I need to check whether if the value exists and not equal to null then show the values in the text box otherwise show a blank field.
The existing code implementation shows something like this :
{
this.state.testJson.Names ? this.state.testJson.Names.length > 0 ? this.state.testJson.Names.map(response =>
<div className="form-group col-md-3" key={response.nameId}>
<label htmlFor="firstName">{Liferay.Language.get('first-name')}</label>
<input name="firstName" value={response.otherName} type="text" className="form-control" id="firstName" />
</div>
):
<div className="form-group col-md-3">
<label htmlFor="firstName">{Liferay.Language.get('first-name')}</label>
<input name="firstName" value='' type="text" className="form-control" id="firstName" />
</div> :
<div className="form-group col-md-3">
<label htmlFor="firstName">{Liferay.Language.get('first-name')}</label>
<input name="firstName" value='' type="text" className="form-control" id="firstName" />
</div>
}
I somehow feel this is not the best way to implement it as I need to avoid code repetition. Could someone tell me what is the better way to achieve this?
Thanks
There's a nice sintactic sugar for modern JavaScript and React (if you are using React, you must likely have it), you simply add a question mark before the object you're not sure it exists like:
this.state?.testJson?.Names?.length > 0
Also, you could have default values of a nullish variable like:
// names will be an empty array if it doesn't exist or if it's nullish
const names = this.state?.testJson?.Names ?? [];
All together is:
const names = this.state?.testJson?.Names ?? [];
return(
names.map(response =>
<div className="form-group col-md-3" key={response?.nameId}>
<label htmlFor="firstName">{Liferay.Language.get('first-name')}</label>
<input
name="firstName"
value={response?.otherName}
type="text"
className="form-control"
id="firstName"
/>
</div>
) : ....rest of the code!
);
You can fetching inside some cards
<div className="row">
{!names
? "Loading..."
: names.map((name) => {
return (
<div className="col">
<div className="card-body">
<h5 className="card-title">{name.firstname}</h5>
</div>
</div>
</div>
);
})}
</div>
I am working on a React project in that project I have a form, In that form I am trying to do
Validation for an email address, but I don't know how to apply all these.
What I am expecting is, In input tag if I type mark, then If I go to another Input tag it has to
Show me some kind of message above Input tag like this, please enter a valid email address.
This is Form.js
import React from 'react';
import './Form.css';
const Form = () => {
const validation = (email) => {
const result = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return result.test(String(email).toLowerCase());
}
return (
<div className='container'>
<div className='row'>
<div className='col-4'>
<div className='mainForm'>
<form>
<div className="form-group">
<label htmlFor="exampleInputEmail1">Email address</label>
<input type="email" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />
</div>
<div className="form-group">
<label htmlFor="exampleInputPassword1">Password</label>
<input type="password" className="form-control" id="exampleInputPassword1" />
</div>
<button type="submit" className="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
)
}
export default Form
I think those are basic problem in all JS code base, you need to catch the input event, using onChange, onBlur, On...etc and bind those event to your react class, like
return <input type=”email” name=”email” value={this.state.email}
onChange={this.handleChange.bind(this)}/>
then on the handleChange you can call the email validation
handleChange(event){
var email = event.target.value;
// do what ever you want
validation(email);
}
Disclaimer: New to development and this is my first s/o post.
I'm using materialize on a react project with a filter that has checkboxes. I currently have the checkbox component returning as:
return (
<div className={this.props.type} >
<form>
<input
type={this.props.type}
value={label}
checked={isChecked}
onChange={(e) => this.toggleCheckboxChange(e)}
/>
<label>
<input
type={this.props.type}
value={label}
checked={isChecked}
onChange={(e) => this.toggleCheckboxChange(e)}
/>
{label}
</label>
</form>
</div>
)
It renders with the checkbox and the label next to it. However, if I remove the input tag that's outside of the label tag like so:
return (
<div className={this.props.type} >
<form>
<label>
<input
type={this.props.type}
value={label}
checked={isChecked}
onChange={(e) => this.toggleCheckboxChange(e)}
/>
{label}
</label>
</form>
</div>
)
the checkbox disappears but the text is still clickable. The component is class based so it maintains its state of being checked or unchecked.
Any ideas as to why it behaves this way?
Problem fixed! Turns out I needed an ID on my input field that matched and htmlFor property on my label field. See below code for the fix:
<div className={this.props.type} >
<form>
<input
id={label[0]}
type={this.props.type}
value={label}
checked={isChecked}
onChange={(e) => this.toggleCheckboxChange(e)}
/>
<label htmlFor={label[0]}>
{label}
</label>
</form>
</div>
So I'm working on building my first application in React. I really don't know much about databases, data models, schema, etc. Is it bad practice to just store my data in the browser as I develop then worry about hooking my app up to something like firebase later?
For example, below I store some user data in an object called user and just go from there. As long as I have some way of accessing it later. Keeping in mind I'm in the beginning stages of frontend development is this bad practice?
Thanks!
var SignUpForm = React.createClass({
getUserInfo : function(event) {
event.preventDefault();
var user = {
name : this.refs.name.value,
userName : this.refs.userName.value,
email : this.refs.email.value,
password : this.refs.password.value
}
console.log(user)
this.refs.signUpForm.reset();
},
render : function() {
return (
<form onSubmit={this.getUserInfo} ref="signUpForm">
<div className="form-group">
<label>First and Last Name</label>
<input type="text" className="form-control" ref="name" />
</div>
<div className="form-group">
<label>Username</label>
<input type="text" className="form-control" ref="userName" />
</div>
<div className="form-group">
<label>Email Address</label>
<input type="email" className="form-control" ref="email" />
</div>
<div className="form-group">
<label>Password</label>
<input type="password" className="form-control" ref="password" />
</div>
<button type="submit" className="btn btn-primary">Sign Up</button>
</form>
);
}
});