Hiding Nested Data - javascript

In my react app I have I'm passing props for a view and two dropdowns. One dropdown is to let the user select an existing post to redirect to, the other is to choose a list from a 3rd party data source.
All of these are under three nested statements.
I don't want both of these dropdowns showing all the time, so I am trying to implement a simple dropdown function to hide the dropdown menu and the refresh list button:
{!this.props.view &&
<div onClick={this.toggleHidden} className="dropdown-wrapper">
{!this.state.isHidden &&
<select
className="dropdown">
<option value="none">
Redirect to an existing Post...
</option>
{this.props.sites
.filter(site => site.site !== undefined)
.map(site => (
<option value={site.site.name} key={site.id}>
{site.site.name}
</option>
))}
</select>
}
{emailProvider &&
<select className="dropdown"
>
<option key={0} value='none'>None</option>
{
emailProvider.length && emailProvider.length > 0 && emailProvider.map((eachData, key) => {
return (
<option key={key+1} value={eachData.id}>{eachData.name}</option>
)
})
}
</select>
}
<button style={{paddingTop: 14}}onClick = {this.handleClick}>Refresh List</button>
</div>
}
The hide function works for the first dropdown, but if I move the closing brace that is under the first</select> to after the </button>, the {emailProvider && code can't find the closing brace which is under the second select option. It returns an error }' expected as if the closing bracket is not there.
How do I encapsulate the two dropdowns and stop this error from occurring?

expression must have at least one parent element
{!this.props.view &&
<div onClick={this.toggleHidden} className="dropdown-wrapper">
{
!this.state.isHidden ?
<> {/*needs to be inside parent component*/}
<select
className="dropdown">
<option value="none">
Redirect to an existing Post...
</option>
{this.props.sites
.filter(site => site.site !== undefined)
.map(site => (
<option value={site.site.name} key={site.id}>
{site.site.name}
</option>
))}
</select>
<> {/*needs to be inside parent component*/}
{emailProvider &&
<select className="dropdown">
<option key={0} value='none'>None</option>
{
emailProvider.length && emailProvider.length > 0 && emailProvider.map((eachData, key) => {
return (
<option key={key + 1} value={eachData.id}>{eachData.name}</option>
)
})
}
</select>
}
</>
<button style={{ paddingTop: 14 }} onClick={this.handleClick}>Refresh List</button>
</>
:
null
}
</div>
}

Related

Error handling multiple map array in single view

I have two Select input to display data. lets say 1 Select is for product and other for display product list based on selected product in select 1. But i had an error that react didnt display my view. after i command the second Select it is run normally.
this is my Select input to select product and coverage:
<div>
<Select onChange={handleChangeSelect} value={TocId} name="ProductID" size="sm">
{TOC.map((type, index) => (
<Select.Option key={type.id} value={type.id}>
{type.desc}
</Select.Option>
))}
</Select>
<Select onChange={handleChangeSelect} value={TocId} name="ProductID" size="sm">
{Coverage.map((type, index) => (
<Select.Option key={type.id} value={type.id}>
{type.desc}
</Select.Option>
))}
</Select>
</div>
i get the coverage data by hit the api, after select product using hooks state
Like this:
const getCoverage = () => {
axios.post( url, data, headers).then(function (response){
if(response.data.Data == 'success') {
setCoverage(response.data.Data)
}
})
}
const handleChangeSelect = (e) => {
setTocId(e);
console.log(TocId);
getCoverage();
};
Hard to tell without seeing the rest of your code but are you fetching Coverage for the first time in handleChangeSelect?
If so, that would be the issue since Coverage doesn't exist in your first render.
A potential workaround could be to make the Coverage options render conditionally.
<div>
<Select onChange={handleChangeSelect} value={TocId} name="ProductID" size="sm">
{TOC.map((type, index) => (
<Select.Option key={type.id} value={type.id}>
{type.desc}
</Select.Option>
))}
</Select>
<Select onChange={handleChangeSelect} value={TocId} name="ProductID" size="sm">
{Coverage && Coverage.length > 0 && Coverage.map((type, index) => (
<Select.Option key={type.id} value={type.id}>
{type.desc}
</Select.Option>
))}
</Select>
</div>
It looks fine. As per my perception, it's an issue of empty state rendering. Render your component conditionally. Also, put a different name prop.
<div>
<Select
onChange={handleChangeSelect}
value={TocId}
name="ProductID"
size="sm"
>
{TOC?.map((type, index) => (
<Select.Option key={type.id} value={type.id}>
{type.desc}
</Select.Option>
))}
</Select>
<Select
onChange={handleChangeSelect}
value={TocId}
name="ProductID"
size="sm"
>
{Coverage?.map((type, index) => (
<Select.Option key={type.id} value={type.id}>
{type.desc}
</Select.Option>
))}
</Select>

React : display multiple hard coded options in Select component

How can I display multiple options tag in my Select component ?
Here's my component :
<Select
id='myID'
name='myName'>
{
(
(localStorage.getItem("localStorageKey").includes("John"))
?
<option key=1 value=myFirstValue>Option 1</option>
:
`
"Something else here"
`
)
}
</Select>
So far if I put just one option it's working, but if I add another one, say :
<Select
id='myID'
name='myName'>
{
(
(localStorage.getItem("localStorageKey").includes("John"))
?
<option key=1 value=myFirstValue>Option 1</option>
+
<option key=2 value=mySecondValue>Option 2</option>
:
`
"Something else here"
`
)
}
</Select>
It won't display anything
<>
<option key=1 value=myFirstValue>Option 1</option>
<option key=2 value=mySecondValue>Option 2</option>
</>
Wrap you options like this
In order to have more than one JSX element as sibling, It should be wrapped either in a React Fragment or in an array.
<> is a short hand for <React.Fragment>
<Select
id='myID'
name='myName'>
{
(localStorage.getItem("localStorageKey").includes("John"))
?
<>
<option key={1} value="myFirstValue">Option 1</option>
<option key={2} value="mySecondValue">Option 2</option>
</>
: "Something else here"
}
</Select>
By using array,
[<option key={1} value="myFirstValue">Option 1</option>,
<option key={2} value="mySecondValue">Option 2</option>]

JSX: Conditional statement within a map

I'm trying to understand how to incorporate conditional statements within JSX. I have an array of objects that I'm mapping to a select box. I want to exclude items that include the substring "threshold" in indicator.name.
So I can't use a ternary operator, because there's no "or" item. But I can't figure out how to include an if statement within this map. Whatever I try I get an error.
<select
defaultValue={defaultValue}
onChange={e => setIndicator(e.currentTarget.value)}
disabled={loading}
>
<option key='' value=''>
Select
</option>
{indicatorList.map(indicator => (
<option key={indicator.name} value={indicator.name}>
{indicator.label}
</option>
))}
</select>
you can filter then map:
<select
defaultValue={defaultValue}
onChange={e => setIndicator(e.currentTarget.value)}
disabled={loading}
>
<option key='' value=''>
Select
</option>
{indicatorList.filter(indicator=>indicator.name.includes('threshold')).map(indicator => (
<option key={indicator.name} value={indicator.name}>
{indicator.label}
</option>
))}
</select>
Or return null:
<select
defaultValue={defaultValue}
onChange={e => setIndicator(e.currentTarget.value)}
disabled={loading}
>
<option key='' value=''>
Select
</option>
{indicatorList.map(indicator => (
indicator.name.includes('threshold')?<option key={indicator.name} value={indicator.name}>:nul
{indicator.label}
</option>
))}
</select>
I would recommend using the filter method to filter out "threshold". This would return the array you are expecting to have inside JSX

Filter List in React

I have a problem here. I have an react api and i want to make a select box to filter data by specific attribute.
constructor() {
super();
this.state = {
results: []
};
}
I receive a list of items with name and ratings. And I want to filter with select. If I want to see just items with 5 rating or greater, select 5.
return (
<div className="container clearfix">
{/* value={props.search} */}
<select>
<option value="" />
<option value="10">10</option>
<option value="9">9</option>
<option value="8">8</option>
</select>
<div>
{props.results
.map(item=> (
<div key={item.id} className="item-holder">
<img src={`${imagePath}${item.image}`} />
<span className="votes">{item.rating}</span>
<p>{item.title}</p>
</div>
))}
</div>
</div>
);
TX!
You need to attach a listener to Select e.g.
<Select onChange={(event) => this.setState({filterValue: event.target.value})}
then you can filter the results with
props.results.filter((item) => item.rating >= this.state.filterValue)
.map(...)

how to append drop down options inside render function?

below is my code. console.log of this.Resources result is shown below
1:"Basavaraj"
2:"Ashuthosh"
3:"Sravan"
4:"Raghavendra"
5:"Prem kumar"
6:"Simran"
7:"Namratha"
8:"Ghanashri"
9:"Ravindra"
10:"Anand"
11:"Shaeen"
render() {
console.log(this.Resources);
const options = this.Resources.map((item, index) =>{
<option key={index} value={item}>{item}</option>
});
return (
<div>
<form>
<div id="select">
<div className="container select">
<div className="row">
<select className="col-4 selectpicker input-large">
<option value="" disabled selected>Select resouce</option>
{options}
</select>
I want all data in this.Resources should come in select drop down options.
Thanks in advance
You are not returning the html in map.Need to return it.
const options = this
.Resources
.map((item, index) => {
return (
<option key={index} value={item}>{item}</option>
);
});
OR
ECMA6 arrow notation with default return:
const options = this
.Resources
.map((item, index) => (
<option key={index} value={item}>{item}</option>
));

Categories

Resources