Code doesnot have any error but I cant Able to load the check boxes. Iam using nested loop to cheeck the condition if tag.id== taged.id then i need to make itchecked.What to do?
<div className="form-group row">
<label for="inputEmail3" className="col-sm-2 col-form-label">
TAG
</label>
<div className="col-sm-10">
<div className="checkbox">
{tate.tags.map(
(tag) =>
hiding.hide &&
form.tags.map((taged) => (
<label>
<input
name="tag[]"
type="checkbox"
value={tag.id}
onChange={handlecheck}
checked={tag.id == taged.id ? true : false}
/>
namnemnma {tag.Tag_name}
</label>
))
)}
</div>
</div>
</div>
Related
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 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'm trying to set enabled true for "SetOutputCurrentPPLowValue" & "SetOutputCurrentPPHighValue" when "SetAlarmValues" is checked. I have the following code, for this issue:
The fields are disabled when the page is loaded but when the "SetAlarmValues" is checked, they stay disabled. I'm not sure why. Please help!
<!-- ko if: $root.regData -->
<div class="row">
<div class="col-md-2">
<label for="SetAlarmValues" class="control-label">#MSL.Core.Resource.Models.Well.SetAlarmValues:</label>
<input type="checkbox" data-bind="checked: $root.regData().setAlarmValues" class="large-check registration" id="SetAlarmValuesCheck" title="#MSL.Core.Resource.Models.Well.SetAlarmValues" />
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<label for="SetOutputCurrentPP" class="control-label">Set Output Current PP:</label>
</div>
</div>
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-5 form-inline">
<label for="SetOutputCurrentPPLowValue" class="control-label">#MSL.Core.Resource.Models.Well.OutputCurrentPPLowValue: </label>
<input type="checkbox" data-bind="checked: $root.regData().setOutputCurrentPPLowValue, enable: $root.regData().setAlarmValues()" class="large-check registration" id="SetOutputCurrentPPLowValue" title="#MSL.Core.Resource.Models.Well.SetOutputCurrentPPLowValue" />
<input type="text" id="OutputCurrentPPLowValue" data-bind="value: $root.regData().outputCurrentPPLowValue, enable: $root.regData().setOutputCurrentPPLowValue" class="form-control" maxlength="30" />
</div>
</div>
<br />
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-5 form-inline">
<label for="SetOutputCurrentPPHighValue" class="control-label">#MSL.Core.Resource.Models.Well.OutputCurrentPPHighValue:</label>
<input type="checkbox" data-bind="checked: $root.regData().setOutputCurrentPPHighValue, enable: $root.regData().setAlarmValues()" class="large-check registration" id="SetOutputCurrentPPHighValue" title="#MSL.Core.Resource.Models.Well.SetOutputCurrentPPHighValue" />
<input type="text" id="OutputCurrentPPHighValue" data-bind="value: $root.regData().outputCurrentPPHighValue, enable: $root.regData().setOutputCurrentPPHighValue" class="form-control" maxlength="30" />
</div>
</div>
</div>
<!-- /ko -->
And this is the script:
function Registration() {
var self = this;
//Alarms
self.setAlarmValues = ko.observable(false);
self.setOutputCurrentPPLowValue = ko.observable(false);
self.setOutputCurrentPPHighValue = ko.observable(false);
self.outputCurrentPPLowValue = ko.observable("");
self.outputCurrentPPHighValue = ko.observable("");
}
var registerVM = function (countryListJSON, companyListJSON, wellStatusListJSON, territoryListJSON) {
self = this;
self.validation = ko.observableArray([]);
self.savingData = ko.observable(false);
self.regData = ko.observable(new Registration());
}
In your code i see this statement- enable: $root.regData().setAlarmValues(), and the setAlarmValues value is been set to false. It will only enabled once you set the value of the field setAlarmValues to true. But as you mentioned once the checkbox is checked please make sure to check if the value is still false or is it changed to True.
So the problem that is happening is that I can't write any input in the forth input box, the timeMetric box and I can't understand why this is happening.
Some more text because it doesn't let me publish the question without enough text, thanks for any advice and help my dudes.
I am gratefull for every answer you might give as it may help to solve this problem that I am having.
Thank you!
render(){
const { data,srcNSG, dstNSG, L7Classification, timeMetric, submitted, loading, error} = this.state;
return (
<div>
<div>
<h4>Nokia Data Mining Project</h4>
</div>
<hr></hr>
<form name="form" onSubmit={this.handleSubmit}>
<div className='form-group row'>
<div className="col-md-2">
<label htmlFor="srcNSG">SrcNSG</label>
<input type="text" className="form-control" name="srcNSG" value={srcNSG} onChange={this.handleChange} />
{submitted && !srcNSG &&
<div className="help-block">srcNSG is required</div>
}
</div>
<div className="col-md-4">
<label htmlFor="dstNSG">DstNSG</label>
<input type="text" className="form-control" name="dstNSG" value={dstNSG} onChange={this.handleChange} />
{submitted && !dstNSG &&
<div className="help-block">DstNSG is required</div>
}
</div>
<div className="col-md-4">
<label htmlFor="L7Classification">L7Classification</label>
<input type="text" className="form-control" name="L7Classification" value={L7Classification} onChange={this.handleChange} />
{submitted && !L7Classification &&
<div className="help-block">L7Classification is required</div>
}
</div>
<div className="col-md-2">
<label htmlFor="Time Metric">timeMetric</label>
<input type="text" className="form-control" name="Time Metric" value={timeMetric} onChange={this.handleChange} />
{submitted && !timeMetric &&
<div className="help-block">timeMetric is required</div>
}
</div>
</div>
<div className="form-group row">
<div className="col-md-2">
<button className="btn btn-primary" disabled={loading}>Submit</button>
{loading &&
<img src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
}
</div>
</div>
{data?
<Plot
data={data}
layout={layout}
//onInitialized={(figure) => this.setState(figure)}
//onUpdate={(figure) => this.setState(figure)}
divId = "graphDiv"
/>
:null
}
{ error?
<Alert message= {error.message} type = "danger"></Alert>
:null
}
</form>
</div>
);
}
Changed timeMetric to className. Still doesn't receive the input. Thanks for finding this one.
SOLVED:
<div className="col-md-2">
<label htmlFor="timeMetric">timeMetric</label>
<input type="text" className="form-control" name="timeMetric" value={timeMetric} onChange={this.handleChange} />
{submitted && !timeMetric &&
<div className="help-block">timeMetric is required</div>
}
</div>
Check your code in timeMetric box. I guess you wanted to write className="form-control" instead timeMetric="form-control"
there is a form which have two checkbox option one is English and another one is Hindi.On the basis of language selection div(child form) will open.but i have a condition if child form or div have some value then on page load checkbox will be check and div will be on open state.
Code which i try is-
<label class="radio-inline" ng-if="$ctrl.astrologerLanguageDetails.IsEnglishValue === true" >
English <input type="checkbox" ng-checked="true"><br /><br />
</label>
<label class="radio-inline" ng-if="!$ctrl.astrologerLanguageDetails.IsEnglishValue === true">
English <input type="checkbox" ng-model="ENchkselct" ><br /><br />
</label>
and this is my div
<div ng-if="$ctrl.astrologerLanguageDetails.IsEnglishValue === true && astroProfile.LanguageId ==='EN' ||ENchkselct" ng-show="ENchkselct">
<div class="col-sm-6 h3"><b>English Profile Translation</b></div><br /><br /><div class="clearfix"></div>
<div class="form-group">
<label class="col-sm-2 control-label">Display First Name</label>
<div class="col-sm-6">
<input type="text" name="profileengfirstname" ng-model="astroProfile.FirstName" class="form-control" />
<!--<span ng-show="astroProfileform.$submitted && astroProfileform.profileengfirstname.$error.required">
Profile First Name is required.
</span>-->
</div>
<label class="col-sm-1 control-label" ng-if="astroProfile.FirstName=== null"><span class="label label-danger">Incomplete</span></label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Display Last Name</label>
<div class="col-sm-6">
<input type="text" name="profileenglastname" ng-model="astroProfile.LastName" class="form-control" />
<!--<span ng-show="astroProfileform.$submitted && astroProfileform.profileenglastname.$error.required">
Profile Last Name is required.
</span>-->
</div>
<label class="col-sm-1 control-label" ng-if="astroProfile.LastName === null"><span class="label label-danger">Incomplete</span></label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Profile Description</label>
<div class="col-sm-6">
<textarea name="profileengresumetext" ng-model="astroProfile.ResumeText" class="form-control"></textarea>
<!--<span ng-show="astroProfileform.$submitted && astroProfileform.profileengresumetext.$error.required">
Profile Resume Text is required.
</span>-->
</div>
<label class="col-sm-1 control-label" ng-if="astroProfile.ResumeText=== null"><span class="label label-danger">Incomplete</span></label>
</div>
</div>
this code only works when checkbox is checked on load but when i checked the checkbox it will not show the div.I am new for angularjs please guide me.
I try to open div automatically if checkbox is check on load and if not then when user checked the checkbox it will show the div
AngularJs creates a child $scope inside ng-if so you should use $parent object to access the parent controller $scope.
Code example:
<label class="radio-inline" ng-if="$ctrl.astrologerLanguageDetails.IsEnglishValue === true">
English <input type="checkbox" ng-checked="true"><br /><br />
</label>
<label class="radio-inline" ng-if="!$ctrl.astrologerLanguageDetails.IsEnglishValue === true">
English <input type="checkbox" ng-model="$parent.ENchkselct" ><br /><br />
</label>