Bootstrap not rendering item properly on page - reactjs

Hi I am using bootstrap to design my page.
const AddRestaurent = () => {
return (
<div className="mb-4">
<form action="">
<div className="form-row">
<div className="col">
<input type="text" className="form-control" placeholder="name"/>
</div>
<div className="col">
<input type="text" className="form-control" placeholder="location"/>
</div>
<div className="col">
<select className="custom-select my-1 mr-sm-2">
<option disabled>Price Range</option>
<option value="1">$</option>
<option value="2">$$</option>
<option value="3">$$$</option>
<option value="4">$$$$</option>
<option value="5">$$$$$</option>
</select>
</div>
<button className="btn btn-primary">Add</button>
</div>
</form>
</div>
)
}
export default AddRestaurent
These components should come on same row. but they are coming in different row. what mistake I am doing. I have included library in my index.html


I assume you're using bootstrap 5.0.
https://getbootstrap.com/docs/5.0/forms/layout/
Try using row instead of form-row.
You can also use gutter (ex. g-2) to adjust gutter width.
const AddRestaurent = () => {
return (
<div className="mb-4">
<form action="">
<div className="row">
<div className="col">
<input type="text" className="form-control" placeholder="name"/>
</div>
<div className="col">
<input type="text" className="form-control" placeholder="location"/>
</div>
<div className="col">
<select className="custom-select my-1 mr-sm-2">
<option disabled>Price Range</option>
<option value="1">$</option>
<option value="2">$$</option>
<option value="3">$$$</option>
<option value="4">$$$$</option>
<option value="5">$$$$$</option>
</select>
</div>
<button className="btn btn-primary">Add</button>
</div>
</form>
</div>
)
}
export default AddRestaurent


You have to use row as classname instead of group-row
<div className="form-row"> replace with <div className="row">

Related

I have a form with input fields onclick save(submit) input fields data should be displayed in next page in a div

<div className="input_container">
<h1>Shipping Address</h1>
<div class="Contactus_table1_inputbox">
<h4>Full Name*</h4><br></br>
<input type="text" required="required"/>
</div>
<div class="Contactus_table1_inputbox">
<h4>Address Line*</h4><br></br>
<input type="text" required="required"/>
</div>
<div class="Contactus_table1_inputbox">
<h4>Zip/Postal Code*</h4><br></br>
<input type="text" required="required"/>
</div>
<div class="Contactus_table1_inputbox">
<h4>City*</h4><br></br>
<input type="text" required="required"/>
</div>
<div class="Contactus_table1_inputbox">
<h4>Country</h4><br></br>
<select>
<option className="option" value="" >India</option>
<option value="" >Australia</option>
<option value="" >France</option>
<option value="" >Germany</option>
<option value="" >Maldives</option>
</select>
</div>
<div className="container">
<div class="Contactus_table1_inputbox">
<h4>Email Address*</h4><br></br>
<input type="text" required="required"/>
</div>
<div id="phone_number" class="Contactus_table1_inputbox">
<h4>Phone Number*</h4><br></br>
<input type="text" required="required"/>
</div>
</div>
</div
// Think of a shopping website when you add your address to your order in payment page there will be summary of your shipping address and order id. I have to show it in another file.
<div className="payment_table2_box">
<h1>Shipping to</h1>
<h2>John Doe</h2>
<p>House no. 10, Amazing Building, Beautiful street, Near Ancient Landmark</p>
<h3>Hyderabad,123456</h3>
<h3>Telangana</h3>
<h3>+91 12345 78900</h3>
<a href="/Address" id="Learn_btn" >Edit</a>
<img id="edit_img" src="../images/edit_img.svg" alt="" />
</div>
// After submission Data should store locally and show in placeholders of payment_table2_box div.

You can make state global using contex api and push or redirect to the page where you want your data to be displayed and access data from context to display in the page.

Changing state in useEffect

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.

How to Reset the dropdown values on form submission, Other Input values are getting Cleared in React Hooks

I have a form and when I click on submit button, the data gets submitted to server.
Now, After the data got submitted to server, I Need to clear the Form data to empty.
Every fields gets clear other than Dropdown value.What was Issue Here??
const Form = () => {
const [data, setdata] = useState({
"UserName" : "",
"PhoneNumber" : "",
"email" : "",
"dropDown" :"",
})
const [update, setUpdate] = useState([])
const handleChange =(e)=>{
setdata({...data,[e.target.name]:e.target.value});
}
const handleSubmit=(e)=>{
e.preventDefault();
// setUpdate({...data,update});
// console.log(data);
axios.post('url',data).then((res)=>{
// console.log("user added successfully");
handleClear();
})
}
So, here I wrote the function to clear the form and I called that function after the submitting the form
const handleClear=()=>{
let clear={
"UserName" : "",
"PhoneNumber" : "",
"email" : "",
"dropDown" :"",
}
setdata(clear);
}
return (
<React.Fragment>
<h1>LordShiva</h1>
<div className="container mt-3">
<div className="row">
<div className="col-md-6">
<div className="card">
<div className="card-header bg-success text-white">
<h4>Form</h4>
<form>
<div className="form-group">
<input type="text" className="form-control" placeholder='UserName' name="UserName" value={data.UserName} onChange={handleChange} />
</div>
<div className="form-group">
<input name="phone" className="form-control" placeholder='PhoneNumber' name="PhoneNumber" value={data.PhoneNumber} onChange={handleChange} />
</div>
{/* <div className="form-group">
<DatePicker selected={startDate} placeholder='Select Date' />
</div> */}
<div className="form-group">
<input name="email" className="form-control" placeholder='Email' value={data.email} onChange={handleChange} />
</div>
<div className="form-group">
<select name="dropDown" onChange={handleChange} className="form-control" >
<option value=""></option>
<option value="Reactjs">ReactJS</option>
<option value="JS">JavaScript</option>
<option value="csCSSs">CSS</option>
<option value="HTML">HTML</option>
</select>
</div>
<div className="form-row">
<button className="btn btn-cyan" type="button" onClick={handleSubmit}>Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</React.Fragment >
)
}

Pass the dropdown state value to the value prop of the select element.
<select
name="dropDown"
value={data.dropdown} // <-- set value to make a controlled input
onChange={handleChange}
className="form-control"
>
<option value=""></option>
<option value="Reactjs">ReactJS</option>
<option value="JS">JavaScript</option>
<option value="csCSSs">CSS</option>
<option value="HTML">HTML</option>
</select>

How do I use a row of custom buttons in a form tag instead of a select drop down menu?

I have a form component which filters data based on the name and category of an asset (ignore the name). I have used the tag to create a dropdown menu but I want to replace this with an array of custom buttons on a seperate row which filter the data when clicked to give assets of that category. Below is the relevant code I have used.
<div className="row">
<div className="col">
<div className="content-block">
Reset filter
<h3>
Filter
</h3>
<form onSubmit={ (e) => this.props.onTriggerFilter(e) } autoComplete="off">
<div className="form-row">
<div className="form-group col-md-3">
<label htmlFor="name">Name</label>
<input
type="text"
className="form-control"
id="name"
value={this.props.filterData.name}
placeholder="Eg, PDF asset..."
onChange={({target}) => this.props.onFilterInputChange('name', target.value)}
/>
</div>
<div className="form-group col-md-3">
<label htmlFor="supplier">Category</label>
<select
name="asset_type"
className="form-control"
value={this.props.filterData.asset_type}
onChange={({target}) => this.props.onFilterInputChange('asset_type', target.value, 'select')}
>
<option value="">All</option>
{ this.props.assetTypeOptions.map((o, key) => (
<option key={ key } value={ o.value }>{ o.label }</option>
))}
</select>
</div>
</div>
<button type="submit" style={{visibility:'hidden'}}>Submit</button>
</form>
</div>
</div>
</div>
I want to replace the select field with a row of buttons in the form
<button type="button" class="btn btn-primary btn-rounded waves-effect">Generic</button>
and get the data to filter when one is pressed. How do I do that?

Angularjs set rootScope with input radio ngModel

Who knows why it doesn't works ?
i want to set a $rootScope value with ngModel on my radio button.
that's an example jsFiddle
<form name="pageTwoForm">
<h3>General Information > Knowledge About </h3>
<div>
<b>User</b>
<div ng-repeat="option in userOptions">
<input type="radio" ng-model="knowledgeAboutUser" ng-value="option.id" />{{option.text}}
</div>
<b>Target Group</b>
<div ng-repeat="option in targetGroupUserOptions">
<input type="radio" ng-model="$parent.knowledgeAboutTargetGroup" ng-value="option.id" />
{{option.text}}
</div>
</div>
</form>
<h3 >{{knowledgeAboutTargetGroup}}</h3>
<h3 >{{knowledgeAboutUser}}</h3>

i solved it
<form name="pageTwoForm">
<h3>General Information > Knowledge About </h3>
<div>
<b>User</b>
<div ng-repeat="option in userOptions">
<input type="radio" ng-model="data.knowledgeAboutUser" ng-value="option.id" />{{option.text}}
</div>
<b>Target Group</b>
<div ng-repeat="option in targetGroupUserOptions">
<input type="radio" ng-model="data.knowledgeAboutTargetGroup" ng-value="option.id" />
{{option.text}}
</div>
</div>
</form>
<h3 >{{data.knowledgeAboutTargetGroup}}</h3>
<h3 >{{data.knowledgeAboutUser}}</h3>
i don't know why but it works if i use
data.knowledgeAboutUser
not only
knowledgeAboutUser

Resources