How can I align my labels, inputs, and textarea on the same line?
export default function Display() {
...
return (
<form onSubmit={handleChange}>
<div className="mb-4 align-middle">
<label>
Title :
<input
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="Title"
/>
</label>
<label>
{" "}
Comment :
<textarea
value={comment}
placeholder="comment"
onChange={(e) => setComment(e.target.value)}
cols="50"
rows="3"
/>
</label>
</div>
</form>
);
}
Here a picture (what I have vs expectations):
Set the parent div to display: flex and flex-direction: row
...
return (
<form onSubmit={handleChange}>
<div className="mb-4 align-middle" style={{display: 'flex', flexDirection: 'row'}}>
<label>
Title :
<input
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="Title"
/>
</label>
<label>
{" "}
Comment :
<textarea
value={comment}
placeholder="comment"
onChange={(e) => setComment(e.target.value)}
cols="50"
rows="3"
/>
</label>
</div>
</form>
);
}```
You can use flex properties of tailwind css to align them in a same row. Also I have wrapped the the two inputs in two separate rate divs.
export default function Display() {
...
return (
<form onSubmit={handleChange}>
<div className="mb-4 align-middle flex flex-row items-center justify-center space-x-10">
<div>
<label>
Title :
<input
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="Title"
/>
</label>
</div>
<div>
<label>
{" "}
Comment :
<textarea
value={comment}
placeholder="comment"
onChange={(e) => setComment(e.target.value)}
cols="50"
rows="3"
/>
</label>
</div>
</div>
</form>
);
}
Related
I am trying to create a bootstrap form and i want to show as a preview in bootstrap card what it will look like
Here is my code for form
<div className="container">
<div className="row">
<div className="col p-5">
<div className="card" style={{ width: "18rem" }}>
<img data-src={img} className="card-img-top" alt="any image"/>
<div className="card-body">
<h5 className="card-title">{title}</h5>
<p className="card-text">{place}</p>
<p className="card-text">{year}</p>
<a href="#" className="btn btn-primary">
Go somewhere
</a>
</div>
</div>
</div>
<div className="col p-5">
<form type="form">
<div className="form-group">
<label>Title</label>
<input
name="title"
type="text"
className="form-control mt-2"
placeholder="Enter name of car"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
</div>
<div className="form-group">
<label>Place</label>
<input
name="place"
type="text"
className="form-control mt-2"
placeholder="Enter city name"
value={place}
onChange={(e) => setPlace(e.target.value)}
/>
</div>
<div className="form-group">
<label>Year</label>
<input
name="year"
type="number"
className="form-control mt-2"
placeholder="Enter mfg year"
value={year}
onChange={(e) => setYear(e.target.value)}
/>
</div>
<div className="form-group">
<input
className=" mt-2"
type="file"
name="file"
value={img}
onChange={changeHandler}
/>
</div>
{error && <div>{error}</div>}
{file && <div>{file.name}</div>}
<button
onClick={uploadFile}
type="submit"
className="btn btn-primary mt-2"
>
Submit
</button>
</form>
</div>
</div>
</div>
I can preview title as given in input field by passing as value parameter but i don't know how to do it with image. Also i am storing value of title,place etc in variable do i need to do the same for image too?
I am using the class component here Consider selecting Yes or No value depending on whether to show or hide the div.
I wanted to do the same thing with multiple div. But here if I am selecting yes then both the div are open. And not close to clicked on no value.
Here is my code:
class PersonalInfo extends Component {
constructor(props) {
super(props);
this.divstatus1 = this.divstatus1.bind(this);
this.divstatus2 = this.divstatus2.bind(this);
this.state = {
value1: 'no',
value2: 'no'
};
}
divstatus1 = (e) => {
this.setState({ value1: e.target.value1 });
}
divstatus2 = (e) => {
this.setState({ value2: e.target.value2 });
}
render() {
return (
<div>
<h3 className="showbase_header">Passport Details</h3>
<div className="form-group">
<label htmlFor="orderby"> Do you have passport ?</label>
<select className="form-control orderby" onChange={this.divstatus1}>
<option value="" selected>Select</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<br></br>
<div className={this.state.value1} >
<div className="row">
<div className="col-md-6 form-group">
<label htmlFor="name">Passport Number
<span className="required">*</span>
</label>
<input type="text" id="firstname" aria-required="true" size={30} name="firstname" className="form-control" placeholder="" />
</div>
<div className="col-md-6 form-group">
<label htmlFor="name">Place Of Issue
<span className="required">*</span>
</label>
<input type="text" id="lastname" aria-required="true" size={30} name="lastname" className="form-control" placeholder="" />
</div>
</div>
<div className="row">
<div className="col-sm-6 form-group">
<label htmlFor="expirydate">Expiry Date
<span className="required">*</span>
</label>
<input type="date" id="expirydate" aria-required="true" size={30} name="expirydate" className="form-control" placeholder="" />
</div>
<div className="col-sm-6 form-group">
<label htmlFor="issuedate">Issue Date
<span className="required">*</span>
</label>
<input type="date" id="issuedate" aria-required="true" size={30} name="issuedate" className="form-control" placeholder="" />
</div>
</div>
</div>
</div>
<div className="form-group">
<h3 className="showbase_header">Representation</h3>
<select className="form-control orderby" onChange={this.divstatus2}>
<option value="">Select</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select><br />
<div className={this.state.value2} >
<div class="row">
<div className="col-sm-6 form-group">
<label htmlFor="name">Name
<span className="required">*</span>
</label>
<input type="text" id="name" aria-required="true" size={30} name="name" className="form-control" placeholder="" />
</div>
<div className="col-sm-6 form-group">
<label htmlFor="number">Contact Number
<span className="required">*</span>
</label>
<input type="number" id="name" aria-required="true" size={30} name="number" className="form-control" placeholder="" />
</div>
</div>
</div>
</div>
</div>
);
}
}
export default PersonalInfo;
I have added in main.css
.yes{display: block;}
.no{display: none;}
Can you try this,
divstatus1 = (e) => {
this.setState({ value1: e.target.value });
}
divstatus2 = (e) => {
this.setState({ value2: e.target.value });
}
option does not have an attribute called value1 or value2
I am dispatching an action in useEffect hook to fetch data and then updating state using the data from redux store. When the page first loads i get the correct data, but when refreshing the browser I get undefined values.
React.useEffect(() => {
dispatch(getSingleCoin(props.match.params.id))
setName(coinDetail.name)
setSymbol(coinDetail.symbol)
setLogourl(coinDetail.logo)
setPrice(coinDetail.price)
setLaunchDate(coinDetail.launchDate)
setWebsiteUrl(coinDetail.websiteUrl)
setNetwork(coinDetail.chain)
setAddress(coinDetail.address)
setTwitterUrl(coinDetail.twitter)
setTelegramUrl(coinDetail.telegram)
setRedditUrl(coinDetail.reddit)
setYoutubeUrl(coinDetail.youtube)
setCoinDescription(coinDetail.description)
setMarketCap(coinDetail.marketCap)
}
}, [coinDetail,dispatch, props.match.params.id])
const handleSubmit = (e) => {
e.preventDefault()
const coin = {}
coin.name = name
coin.symbol = symbol
coin.logo = logourl
coin.price = price
coin.launchDate = launchDate
coin.websiteUrl = websiteUrl
coin.chain = network
coin.address = address
coin.twitter = twitterUrl
coin.telegram = telegramUrl
coin.reddit = redditUrl
coin.youtube = youtube
coin.description = coinDescription
coin.marketCap = marketCap
coin._id = props.match.params.id
dispatch(updateCoin(coin))
}
return (
<div className="container add-coin-wapper mt-4">
{loading && coinDetail === undefined ? (
<div>...Loading</div>
) : error ? (
<div>{error}</div>
) : (
<div className="card ">
<div className="card-header">
<div className="approve-header">
<div
className="approve-back"
onClick={() => props.history.push('/Admin/coinlist')}
>
<ArrowBackIosIcon />
<div>Back to Coin listing</div>
</div>
</div>
</div>
<div className="card-body">
{/* here */}
<>
<div>
<h3>Edit Coin</h3>
</div>
<form onSubmit={handleSubmit}>
<div className="row">
<div className="col-sm-12 col-md-6 col-lg-6">
<h5>Coin informations</h5>
<div className="form-group">
<label htmlFor="name">name</label>
<input
type="text"
className="form-control"
id="name"
name="name"
placeholder="Bitcoin"
required
onChange={(e) => setName(e.target.value)}
value={name}
/>
</div>
<div className="form-group">
<label htmlFor="symbol">symbol</label>
<input
type="text"
className="form-control"
id="symbol"
name="symbol"
placeholder="Enter symbol"
onChange={(e) => setSymbol(e.target.value)}
required
value={symbol}
/>
</div>
<div className="form-group">
<label htmlFor="logo">Logo url</label>
<input
type="text"
className="form-control"
id="url"
name="logourl"
placeholder="https://clod.com/logo"
onChange={(e) => setLogourl(e.target.value)}
value={logourl}
/>
</div>
<div className="form-group">
<label htmlFor="description">Coin Description</label>
<textarea
className="form-control"
id="exampleFormControlTextarea1"
rows="3"
onChange={(e) => setCoinDescription(e.target.value)}
placeholder="Describe your coin appropriately to show attractiveness"
value={coinDescription}
></textarea>
</div>
<div className="form-group">
<label htmlFor="price">price</label>
<div className="input-group mb-2">
<div className="input-group-prepend">
<div className="input-group-text">$</div>
</div>
<input
type="number"
className="form-control"
id="marketcap"
placeholder="0.00085"
step="any"
min="0"
onChange={(e) => setPrice(e.target.value)}
value={price}
/>
</div>
</div>
<div className="form-group">
<label htmlFor="marketcap">Market cap</label>
<div className="input-group mb-2">
<div className="input-group-prepend">
<div className="input-group-text">$</div>
</div>
<input
type="number"
className="form-control"
id="marketcap"
step="any"
placeholder="0.00085"
min="0"
onChange={(e) => setMarketCap(e.target.value)}
value={marketCap}
/>
</div>
</div>
<div className="form-group">
<label htmlFor="launchdate">Launch date</label>
<div
className="input-group date"
data-provide="datepicker"
>
<input
type="date"
className="form-control"
onChange={(e) => setLaunchDate(e.target.value)}
value={moment(launchDate).format('YYYY-MM-DD')}
/>
<div className="input-group-addon">
<span className="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
<div className="col-sm-12 col-md-6 col-lg-6">
<h5>Coin market</h5>
<div className="form-group">
<label htmlFor="network">Network/Chain</label>
<select
className="form-control"
id="network"
onChange={(e) => setNetwork(e.target.value)}
value={network}
>
<option value="BSC">Binance Smart Chain (BSC)</option>
<option value="ETH">Ethereum (ETH)</option>
<option value="SOL">Solona (SOL)</option>
</select>
</div>
<div className="form-group">
<label htmlFor="contract">Contract Adress</label>
<input
type="text"
className="form-control"
id="contract"
name="contract"
placeholder="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
onChange={(e) => setAddress(e.target.value)}
required
value={address}
/>
</div>
<h5>Coin links</h5>
<div className="form-group">
<label htmlFor="weburl">Website url</label>
<div className="input-group mb-2">
<div className="input-group-prepend">
<div className="input-group-text">
<LanguageIcon />
</div>
</div>
<input
type="text"
className="form-control"
id="web"
placeholder="https://www.coinx.com"
onChange={(e) => setWebsiteUrl(e.target.value)}
required
value={websiteUrl}
/>
</div>
</div>
<div className="form-group">
<label htmlFor="twitter">Twitter</label>
<div className="input-group mb-2">
<div className="input-group-prepend">
<div className="input-group-text">
<TwitterIcon />
</div>
</div>
<input
type="text"
className="form-control"
id="twitter"
placeholder="https://twitter.com/"
onChange={(e) => setTwitterUrl(e.target.value)}
value={twitterUrl}
/>
</div>
</div>
<div className="form-group">
<label htmlFor="telegram">Telegram</label>
<div className="input-group mb-2">
<div className="input-group-prepend">
<div className="input-group-text">
<TelegramIcon />
</div>
</div>
<input
type="text"
className="form-control"
id="telegram"
placeholder="https://t.me/"
onChange={(e) => setTelegramUrl(e.target.value)}
value={telegramUrl}
/>
</div>
</div>
<div className="form-group">
<label htmlFor="youtube">YouTube</label>
<div className="input-group mb-2">
<div className="input-group-prepend">
<div className="input-group-text">
<YouTubeIcon />
</div>
</div>
<input
type="text"
className="form-control"
id="youtube"
placeholder="https://www.youtube.com/watch?v="
onChange={(e) => setYoutubeUrl(e.target.value)}
value={youtube}
/>
</div>
</div>
<div className="form-group">
<label htmlFor="reddit">Reddit</label>
<div className="input-group mb-2">
<div className="input-group-prepend">
<div className="input-group-text">
<RedditIcon />
</div>
</div>
<input
type="text"
className="form-control"
id="reddit"
placeholder="https://www.reddit.com"
onChange={(e) => setRedditUrl(e.target.value)}
value={redditUrl}
/>
</div>
</div>
<button type="submit" className="btn" disabled={loading}>
update
</button>
</div>
</div>
</form>
</>
{/* here */}
</div>
{/* here */}
</div>
)}
</div>
The state data is supposed to be displayed in form input elements. I render a div with a loading status before the data is fetched and loading set to false.
I'm working on a project which required ant design datepicker along with bootstrap.I'm not sure whats making this datepicker move out of screen. Is there something I need to do with bootstrap classes to fix this? I have shared my screenshot.thanenter image description here]1]1
const form= () => (
<form onSubmit={onFormSubmit}>
<div className="form-group">
<label className="btn btn-outline-secondary btn-block m-3">Add image
<input type="file" name="image" onChange={handleImageChange} accept="image/*" hidden/>
</label>
<input className="form-control m-2" type="text" name="title" placeholder="title" onChange={handleChange} value={title}/>
<textarea className="form-control m-2" type="text" name="content" placeholder="content" onChange={handleChange} value={content}/>
<AlgoliaPlaces className="form-control ml-2" placeholder="location" defaultValue={location} options={config} onChange={handleSearch} style={{height:"50px"}} />
<input className="form-control m-2" type="number" name="price" placeholder="price" onChange={handleChange} value={price}/>
<input className="form-control m-2" type="number" name="bed" placeholder="Number of beds" onChange={handleChange} value={bed}/>
</div>
**<DatePicker className="form-control m-2"/>**
<button className="btn btn-outline-primary m-2">Add</button>
</form>
)
return(
<div>
<div className="container-fluid p-5 text-center">
<h2>Add </h2>
</div>
<div className="container-fluid">
<div className="row">
<div className="col-md-10">
{hotelForm()}
</div
<div className="col-md-2">
<img src={preview} alt="preview-image" className="img img-fluid m-2" />
<pre>{JSON.stringify(values,null, 2)}</pre>
</div>
</div>
</div>
</div>
)
It looks like you are missing ant design css stylesheet.
Try to add the following line at the root of your app :
import 'antd/dist/antd.css';
I am creating a signup form that will render differently depending on whether the person signing up chooses Post a project or Work on a project from the very first div in the form.
How can I render each div that follows in the form-group conditionally based on what is selected in the first div? I am using hooks and I have found that most examples are for the extends Component approach.
My form:
const signUpForm = () => (
<form onSubmit={clickSubmit}>
<div className="form-group">
<select onChange={handleChange("role")} class="form-control">
<option selected>I want to...</option>
<option>Post a project</option>
<option>Work on a project</option>
</select>
</div>
<div className="form-group">
<input
onChange={handleChange("name")}
type="text"
placeholder="Name"
className="form-control"
value={name}
/>
</div>
<div className="form-group">
<input
onChange={handleChange("email")}
type="email"
placeholder="Email"
className="form-control"
value={email}
/>
</div>
<div className="form-group">
<input
onChange={handleChange("password")}
type="password"
placeholder="Password"
className="form-control"
value={password}
/>
</div>
<div className="form-group">
<input
onChange={handleChange("studying")}
type="text"
placeholder="I'm studying..."
className="form-control"
value={studying}
/>
</div>
<div>
<div>{createInputs()}</div>
<button
className="btn btn-outline-primary btn-sm mb-3"
onClick={addSkill}
type="text"
>
Add more skills
</button>
</div>
<button onClick={clickSubmit} className="btn btn-primary" type="submit">
Sign Up
</button>
</form>
);
State:
const Signup = () => {
const [values, setValues] = useState({
name: "",
email: "",
password: "",
studying: "",
skills: [""],
error: "",
success: "",
role: ""
});
const { name, email, password, studying, skills, success, error, role } = values;
handleChange():
const handleChange = name => event => {
setValues({ ...values, error: false, [name]: event.target.value });
};
You should first divide the signUp in two parts and then call second function based on value of "role" from state.
The idea is to return the divs from second function based on state of first input.
const signUpForm = () => (
<form onSubmit={clickSubmit}>
<div className="form-group">
<select onChange={handleChange("role")} class="form-control">
<option selected>I want to...</option>
<option>Post a project</option>
<option>Work on a project</option>
</select>
</div>
{this.renderInput()}
<button onClick={clickSubmit} className="btn btn-primary" type="submit">
Sign Up
</button>
</form>
);
renderInput() {
if (values.role === "post") {
return (
<div className="form-group">
<input onChange={handleChange("name")} type="text" placeholder="Name" className="form-control" value={name} />
</div>
<div className="form-group">
<input onChange={handleChange("email")} type="email" placeholder="Email" className="form-control" value={email} />
</div>
<div className="form-group">
<input onChange={handleChange("password")} type="password" placeholder="Password" className="form-control" value={password} />
</div>
<div className="form-group">
<input onChange={handleChange("studying")} type="text" placeholder="I'm studying..." className="form-control" value={studying} />
</div>
<div>
<div>{createInputs()}</div>
<button className="btn btn-outline-primary btn-sm mb-3" onClick={addSkill} type="text">
Add more skills
</button>
</div>
);
}
}
You want to test the role state value is truthy/falsey and render the rest of your form on that value.
const SignUpForm = () => (
<form onSubmit={clickSubmit}>
<div className="form-group">
<select
defaultValue='unselected' // set default value here
onChange={handleChange("role")}
className="form-control" // fix className here, class alone isn't correct in react
>
<option value='unselected'>I want to...</option>
<option value='post'>Post a project</option>
<option value='work'>Work on a project</option>
</select>
</div>
{!!role && (
<Fragment>
<div className="form-group">
<input
onChange={handleChange("name")}
type="text"
placeholder="Name"
className="form-control"
value={name}
/>
</div>
<div className="form-group">
<input
onChange={handleChange("email")}
type="email"
placeholder="Email"
className="form-control"
value={email}
/>
</div>
<div className="form-group">
<input
onChange={handleChange("password")}
type="password"
placeholder="Password"
className="form-control"
value={password}
/>
</div>
<div className="form-group">
<input
onChange={handleChange("studying")}
type="text"
placeholder="I'm studying..."
className="form-control"
value={studying}
/>
</div>
<div>
<div>{createInputs()}</div>
<button
className="btn btn-outline-primary btn-sm mb-3"
onClick={addSkill}
type="text"
>
Add more skills
</button>
</div>
</Fragment>
)}
<button onClick={clickSubmit} className="btn btn-primary" type="submit">
Sign Up
</button>
</form>
);