I am using React semantic UI. I am rendering a dropdown. I have written code such that, once an option is selected, the options text is shown in the field. But when I select an option from the dropdown, the selected value's text is not displayed, rather it shows an empty field.
Here is my dropdown code:
options = [
{ key:"a", value: 1, name: 'uni', text: "first"},
{ key:"b", value: 2, name: 'duo', text: 'second'},
{ key:"c", value: 3, name: 'tri', text: ' third'},
{ key:"d", value: 4, name: 'quart', text: 'fourth'},
{ key:"e", value: 5, name: 'cinq', text: 'sixth'},
{ key:"f", value: 6, name: 'dernier', text: 'last'}
];
const handleDropDownSelect = (event, data) => {
onChangeValue(data.value)
};
const Dropdown = () => (
return(
<Dropdown
placeholder = abc"
fluid
selection
options={options}
onChange={handleDropDownSelect}
/>)
<DropDownContainer className="Dropdown">
<Dropdown />
</DropDownContainer>
onChangeValue is a function I am using in a different component where I get the value from this dropdown and update other components. So the issue is, when I select an option, the text should be shown in the dropdown field, not left blanc
Related
so i have something like this :
Default value is english anyway , but i wanna display "english" instead of Select there , also if i select any other languages from the menu :
https://i.stack.imgur.com/A1iDx.png
the value still says "Select" but the content on web page changes anyway , how can i show up the value if i select anything from tag ?
code until now :
const [select, setSelectedOption] = React.useState();
const options = [
{value: 'English', label: 'English' },
{ value: 'Japanese', label: 'Japanese' },
{ value: 'Chinese', label: 'Chinese' },
{ value: 'Korean', label: 'Korean' },
{ value: 'Spanish', label: 'Spanish' },
];
const handleChange = SelectedOption => {
setSelectedOption(SelectedOption)
localStorage.setItem("lang", SelectedOption.value);
window.location.reload(false)
// history.push(window.location.pathname);
};
<div className="Language">
<h4>Language</h4>
<Select
value={select}
onChange={handleChange}
options={options}
default={options[0].value}
/>
</div>
any help would be appreciated !
The thing i am trying is .
The page is already in English by default so it should display "English" as selected already in the Tag
If i select any other Language instead of English , then the language should replace English and display.
So i've done this by now :
<h4>Language</h4>
<Select
defaultValue={options[0]}
value={select}
onChange={handleChange}
options={options}
autoFocus ={true}
/>
const handleChange = SelectedOption => {
setSelectedOption({SelectedOption})
console.log(SelectedOption)
localStorage.setItem("lang", SelectedOption.value);
window.location.reload(false)
};
The value "English" is appearing but when i change to other language the "English" value remains , but page changes it's language.
I hope you manage the value of the 'select' via useState(). If so Reason for this behavior is after you select, component get re-render and set the default value again. To overcome that remove default and set the initial value to value attribute in select.
const options = [
{value: 'English', label: 'English' },
{ value: 'Japanese', label: 'Japanese' },
{ value: 'Chinese', label: 'Chinese' },
{ value: 'Korean', label: 'Korean' },
{ value: 'Spanish', label: 'Spanish' },
];
const[select, setSelectedOption] = useState(options[0].value);
const handleChange = SelectedOption => {
setSelectedOption(SelectedOption)
localStorage.setItem("lang", SelectedOption.value);
window.location.reload(false)};
<div className="Language">
<h4>Language</h4>
<Select
value={select}
onChange={handleChange}
options={options}
autoFocus ={true}
/>
</div>
ok i got the answer after trails and error , but this remains fixed to one page only , can anyone help me if these values should be fixed when we navigate to other pages ?
my current solution to the question i posted is this :
const options = [
{value: 'English', label: 'English' },
{ value: 'Japanese', label: 'Japanese' },
{ value: 'Chinese', label: 'Chinese' },
{ value: 'Korean', label: 'Korean' },
{ value: 'Spanish', label: 'Spanish' },
];
const[select, setSelectedOption] = useState(options[0].value);
const handleChange = SelectedOption => {
console.log(SelectedOption.value)
setSelectedOption(SelectedOption.value)
localStorage.setItem("lang", SelectedOption.value);
//window.location.reload(true)
history.push(window.location.pathname);
};
<div className="Language">
<h4>Language</h4>
<Select
value={select.value}
defaultValue = 'English'
onChange={handleChange}
options={options}
/>
</div>
The only issue is if i navigate to other pages , The values go away and the Tag remains empty again
Can I hover an option element to show more options?
I want to have a dropdown nested component like the following screenshot
I have this array of objects and pass it to the DropDown component, if the first object has a field called modules and it has an array of two objects how can I display it as a nested dropdown?
index.js
import React from "react";
import ReactDOM from "react-dom";
import DropDown from "./DropDown";
const availableModules = [
{
text: "environment",
value: "Environment",
modules: [{ key: "greenhouse" }, { key: "protected species" }],
},
{
text: "mobility",
value: "Mobility",
modules: [
{ key: "walk accessibility" },
{ key: "transit accessibility" },
{ key: "travel patterns" },
],
},
{
text: "resiliency",
value: "Resiliency",
modules: [{ key: "flood" }, { key: "fire" }, { key: "earthquake" }],
},
];
ReactDOM.render(
<DropDown availableModules={availableModules} />,
document.getElementById("root")
);
Dropdown.js
const DropDown = ({availableModules}) => {
return (
<div>
<p>Select Option </p>
<select >
{availableModules.map((item, index) => (
<option
value={item.text}
key={index}
>
{item.text}
</option>
))}
</select>
</div>
)
}
Yes, you can. Just render the entire div structure, with all ULs and LIs, and use css to show/hide the menus and submenus.
There is no need to use state for this - showing/hiding via css and detecting hover via css - css alone can handle the job.
On desired LI items, add your click handler as per normal.
<li
onClick={handleDoThisParticularThing}
>
This particular item
</li>
There are many examples online. Just google something like create a nested menu system css
https://css-tricks.com/solved-with-css-dropdown-menus/
https://www.smashingmagazine.com/2017/11/building-accessible-menu-systems/
I am trying the following code
import React, { Component } from 'react'
import ReactSearchBox from 'react-search-box'
export default class App extends Component {
data = [
{
key: 'john',
value: 'John Doe',
},
{
key: 'jane',
value: 'Jane Doe',
},
{
key: 'mary',
value: 'Mary Phillips',
},
{
key: 'robert',
value: 'Robert',
},
{
key: 'karius',
value: 'Karius',
},
]
render() {
return (
<ReactSearchBox
placeholder="Placeholder"
value="Doe"
data={this.data}
callback={record => console.log(record)}
/>
)
}
}
and it works really. However the search options only show when I start typing in the searchbox. What I am trying to do is when the user clicks in the search, show them some options, Can you help with understanding how to achieve that.
there is a method called
onFocus - A function which acts as a callback when the input is focussed.
which does get called when I click in the search box, but I am not able to work out how to display the options in the dropdown.
import React, { Component } from 'react'
import Select from 'react-select'
export default class App extends Component {
state = {
selectedValue:null
}
data = [
{
label: 'john',
value: 'John Doe',
},
{
label: 'jane',
value: 'Jane Doe',
},
{
label: 'mary',
value: 'Mary Phillips',
},
{
label: 'robert',
value: 'Robert',
},
{
label: 'karius',
value: 'Karius',
},
]
render() {
return (
<Select
options={this.data}
isSearchable
value={this.state.selectedValue}
onChange={this.handleChange}
/>
)
}
}
If you want to display a dropdown with search option I would recommend using react-select library. However your data should be in the form of an object like this {label:' ',value:' '}. This component takes an isSearchable prop that allows us to search the dropdown as well as select an option manually. Hope this helps!
I am fetching data from API and data is coming in below form
data : [
{
source1: { number: 1,title: '', content: ''},
source2: { number: 2, title: '',content: ''},
source3: { number: 4, title: '',content: '' },
id: '1',
title: '',
},
{
source1: { number: 1,title: '', content: ''},
source2: { number: 2, title: '',content: ''},
source3: { number: 4, title: '',content: '' },
id: '2',
title: '',
}
]
I want to show on Flatlist and what i want from this that
Four button are there.
When click on one the text will be changed and also button style will be updated. Button tittle and chaning text will come from data -> soruce 1 (button 1) source2 (button 2) source3 (button 3) soruce 4 (button 4) . for single item
Help me how can implement this each render item on flatlist or through map()?
thanks
One way is to maintain an activeSource/activeItem in the data and update it on source change from Touchable/Button.This way it will be easy to maintain the active source per item.
data: [
{source1:'',source2:'',source3:'',...,activeSource:'source1',id:1,Title:''},
{source1:'',source2:'',source3:'',...,activeSource:'source1',id:2,Title:''},
{source1:'',source2:'',source3:'',...,activeSource:'source1',id:3,Title:''},
...
]
Change the activeSource from the Touchable from the item index which you get in renderItem prop
renderItem=(({item,index})=>{...})
The onChange will look something like this
changeSource = (source, itemIndex) => {
this.setState(prevState => ({
data: prevState.data.map((item, index) => {
if (index !== itemIndex) return item;
return {
...item,
activeSource: source,
};
}),
}));
};
And render corresponding source item as
<Text>{item[item[activeSource]]}</Text
Iam attaching an expo link
In React-Select V2, we're able to create option groups by passing an options param like so:
options = [
{ label: 'Group', options: [
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' }
]}
]
I need to be able to go another layer deep, something like:
options = [
{ label: 'Group', options: [
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', options: [
{ label: 'Option 2-a', value: '2a' },
{ label: 'Option 2-b', value: '2b' },
]}
]}
]
Which would display the options "Option 2-a" and "Option 2-b" in a group under "Option 2". The approach above doesn't work out of the box, so I want to know if there's a way to create nested groups in React-Select V2.
For anyone who comes here with a similar need, I implemented this recursive work-around.
const renderNestedOption = (props, label, nestedOptions) => {
const {
cx,
getStyles,
innerProps,
selectOption,
} = props;
// Will be applied to nested optgroup headers
const nestedLabelClassName = cx(
css(getStyles('groupHeading', props)),
{ option: true },
'nested-optgroup-label',
);
return (
<div className="nested-optgroup">
<div className={nestedLabelClassName}>
{label}
</div>
{nestedOptions.map((nestedOption) => {
if (nestedOption.options) {
// Read below
// Read above
return renderNestedOption(props, nestedOption.label, nestedOption.options);
}
const nestedInnerProps = innerProps;
nestedInnerProps.onClick = () => selectOption(nestedOption);
return (
<div className="nested-optgroup-option" key={nestedOption.value}>
<components.Option {...props} innerProps={nestedInnerProps}>
{nestedOption.label}
</components.Option>
</div>
);
})}
</div>
);
};
const Option = (props) => {
const {
children,
data,
} = props;
const nestedOptions = data.options;
if (nestedOptions) {
const label = data.label;
return renderNestedOption(props, label, nestedOptions);
}
return (
<components.Option {...props}>
{children}
</components.Option>
);
};
Then in your select component, replace the Option component with the custom Option component we just created.
EDIT
There's an open pull request to support this functionality:
https://github.com/JedWatson/react-select/pull/2750