showing select on check reactjs - javascript

I am trying to get a select to show/hide on check but the select just renders and does not disappear nor reappear. I am fairly new to react, so I am sure I am doing something wrong.
export default class TreeTest extends Component {
constructor() {
super();
this.state = {
checked: [
'/grantSettingsPermissions/Admin',
'/grantSettingsPermissions/ContentGroups/AddLocations',
],
expanded: [
'/grantSettingsPermissions',
'/grantSettingsPermissions/ContentGroups',
],
};
this.onCheck = this.onCheck.bind(this);
this.onExpand = this.onExpand.bind(this);
this.handleChange = this.handleChange.bind(this);
}
onCheck(checked) {
console.log(checked);
this.setState({
checked,
});
}
onExpand(expanded) {
this.setState({
expanded,
});
}
handleChange() {
this.setState({
checked: !this.state.checked,
});
}
render() {
const { checked, expanded } = this.state;
const content = this.state.checked
? <select>
<option value="test1">test1</option>
<option value="test2">test2</option>
</select>
: null;
return (
<div>
{ content }
<CheckboxTree
checked={checked}
expanded={expanded}
nodes={nodes}
onCheck={this.onCheck}
onExpand={this.onExpand}
expandDisabled={true}
onChange={ this.handleChange }
/>
</div>
);
}
}
I have a feeling I just need to add stuff to the onCheck function, but I am not entirely sure. Any help would be awesome!

Your condition should be:
const content = this.state.checked.length === 0
? <select>
<option value="test1">test1</option>
<option value="test2">test2</option>
</select>
: null;

I'm not sure what your component CheckboxTree does, but here is some info that applies to regular input controls:
Your event handler onChecked is expecting checked to be the value of your checkbox, but in fact it will be an event object. So you need to get the value from the event object and set the state with that:
onCheck(e) {
console.log(e);
let checked = {checked: e.target.value}
this.setState({
checked,
});
}
UPDATE
I see from the documentation that they are doing it the same way, so it should work, because your code is equivalent to this:
onCheck={checked => this.setState({ checked })}
onExpand={expanded => this.setState({ expanded })}

Related

How can I get key not value, from React on change? [duplicate]

I have an issue with react when I want to change the selected option.
The problem is that the value is an object and I can't pass it in option value attribut.
See the following code:
class Selector extends React.Component {
contructor(props) {
super(props)
this.state = { obj: null }
this.handleChange = this.handleChange.bind(this)
}
handleChange(e) {
this.setState({obj: e.target.value})
}
render() {
<select onChange={handleChange}>
{this.props.listOption.map((option, index) =>
<option key={index} value={option.obj}>
{option.name}
</option>
)}
</select>
}
}
and with
<Selector option={[{name: "name", obj:{...}}, ...]}>
I need to change the state of the component with the value of the selected option.
What I get when the state change is "object Object". I suppose this happens because react can't embed javascript object in attribut of final view. I am right?
Moreover, I set obj in state as null in the constructor
Is there a right way to do it?
You can make use of index of options
class Selector extends React.Component {
contructor(props) {
super(props);
this.state = { obj: null }
this.handleChange = this.handleChange.bind(this)
}
handleChange(e) {
this.setState({obj: this.props.listOption[e.target.value].obj})
}
render() {
<select onChange={handleChange}>
{this.props.listOption.map((option, index) =>
<option key={index} value={index}>
{option.name}
</option>
)}
</select>
}
}
Moreover, I set obj in state as null in the constructor Is there a
right way to do it?
I depends on your requirement. If you want to show at least one option as selected you can keep that instead of null
Convert the object to JSON string, and pass it as value.
And convert the string back to object in the handler.
handleChange(event) {
let obj = JSON.parse(event.target.value); //object
}
render() {
<select onChange={handleChange}>
{this.props.listOption.map((option, index) =>
<option key={index}
value={JSON.stringify(option)}> //pass object string as value
{option.name}
</option>
)}
</select>
}
I assume you want only one option will be selected.
So the easiest way would be to set selectedIndex.
When using construct always think of value type.
this.state = { selectedIndex: 0}
Now you've state with selectedIndex object which firstly is equal to 0.
In render method you could then just check for the index:
{this.props.listOption.map((option, index) => {
this.state.selectedIndex == index ? (
<option key={index} value={option.obj} selected>option.name</option>
): (
<option key={index} value={option.obj}>option.name</option>
))}
And on handle change setState with e.target.key.
I may have left syntax errors... Altought I hope it helps.
Try this following code,
import React from 'react';
class LocationDemo extends React.Component {
constructor(props) {
super(props);
this.state = {
searchLoc: undefined,
selectedLoc: "",
locs:[
{"name" : "Kerala","districts":["Ernakulam", "Trivandrum"]},
{"name" :"Tamil Nadu","districts" :["Palani","Tiruchi"]}
],
};
this.handleChangeLocation = this.handleChangeLocation.bind(this);
}
handleChangeLocation = (event) => {
this.setState({ selectedLoc: event, searchLoc: event.target.value }
, () => console.log("searchLoc", this.state.searchLoc));
}
render() {
return (
<select class="cls-location" id="id-location"
onChange={this.handleChangeLocation}
value={this.state.locs.find(obj => obj.value === this.state.selectedLoc)}
required
>
{
this.state.locs.map(loc => {
return (
<option name={loc.name} value={JSON.stringify(loc)}>{loc.name}</option>
)
})
}
</select>
);
}
}
export default LocationDemo;
In my case, I also needed an option object (currentValue) to be selected at init.
I do not want to search for that object in this.props.listOption to get its index.
So, instead of replacing the objects with their index, I added a custom attribute data-index to the options.
The value of attribute data-index of an option option can be accessed using option.dataset.index:
handleChange(e) {
const selectedIndex = e.target.selectedOptions[0].dataset.index];
this.setState({obj: this.props.listOption[selectedIndex].obj})
}
render() {
<select value={currentValue} onChange={handleChange}>
{this.props.listOption.map((option, index) =>
<option key={index} value={option.obj} data-index={index}>
{option.name}
</option>
)}
</select>
}
That code should not be difficult to adapt to multiple selects.

How to clear selected value from dynamic select dropdown in react?

I have implemented a form in which a Select dropdown is taking dynamic data from server.
Now when I select a option from dropdown, it is showing value in the field, but after saving the form or cancel saving it, when I reopen the form, the selected value is not cleared from field.
What needs to be done to correct it?
Here is my code:
class Task extends Component{
constructor(props){
super(props);
this.state={
SelectedName:'',
TaskList:[],
}
}
componentWillMount(){
fetch(
...
.then(responseJson => {
let taskList=responseJson.data;
let r = taskList.map(function(task){
return {value: task.id, display: task.name}
});
this.setState({TaskList:r });
}
//this is cancelForm fucntion
cancelSave=()=>{
this.setState({SelectedName:''});
}
handleNameSelection=()=>{
var row = this.state.TaskList.filter(function (item) {
return item.value == event.target.value
})
this.setState({ SelectedName: row[0].display});
}
render(){
return(
<Select
defaultValue="placeholder-item"
id="select-task-name"
labelText="Select Task Name"
value={this.state.SelectedName}
onChange={(event) => this.handleNameSelection(event)}
>
{
(this.state.TaskList.length > 0) ?
this.state.TaskList.map(function (list, idx) {
return <option key={idx}
value={list.value}>{list.display}</option>
})
:
<option />
}
</Select>
);
}
}
You should empty array list of tasks in the state after your form submit
here I can't see your submit function ( if you're using this above as subcomonent it's another logic to implement otherwise see below example )
as example :
let onSubmit = (values) => {
/* form submit stuff */
this.setState({
...state,
SelectedName:''
});
}

Select onChange link to value - ReactJS

How can I link to a value when selected onChange in a select box?
Looking to implement a select menu into ReactJS that links to the value onChange.
render() {
return (
<select onChange={() => {if (this.value) window.location.href=this.value}}>
<option value="">Please select</option>
{pages.map(({ node: page })=> (
<option key={page.id} value="{page.slug}">{page.title}</option>
))}
</select>
);
}
This is getting the value (I believe) but I keep getting the error of Cannot read property 'value' of undefined
I have tried following the documents here as suggested in some answers yet I have not been able to get this working with my current code - see as follows the full Page.js
import React from 'react'
import Helmet from 'react-helmet'
import styled from 'styled-components'
import config from '../utils/siteConfig'
const PageCompany = ({data}) => {
const {title,slug} = data.contentfulCompanyPage;
const pages = data.allContentfulCompanyPage.edges;
return(
<Wrapper>
<CompanyMenu>
<div>
<select onChange={() => {if (this.value) window.location.href=this.value}}>
<option value="">Please select</option>
{pages.map(({ node: page })=> (
<option key={page.id} value="{page.slug}">{page.title}</option>
))}
</select>
</div>
</CompanyMenu>
</Wrapper>
)
}
export const companyQuery = graphql`
query companyQuery($slug: String!) {
contentfulCompanyPage(slug: {eq: $slug}) {
title
slug
keywords
description
heroBg {
sizes(maxWidth: 1500) {
src
}
}
}
allContentfulCompanyPage(sort: {fields: [menuOrder], order: ASC}) {
edges {
node {
id
title
slug
}
}
}
}
`
export default PageCompany
Instead of making use of Global window.location property you can make a separate method handleChange like :
constructor(props) {
super(props);
this.state = { }; // initialise state
// Make sure to bind handleChange or you can make use of arrow function
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
const targetValue = e.target.value;
// Then you can do whatever you want to do with the value
this.setState({
[name]: targetValue
});
EDIT : In order to make use of constructor make sure you are defining components using class syntax like:
import React , { Component } from 'react';
class PageCompany extends Component {
constructor(props) {
super(props);
this.state = { }; // initialise state
this.handleChange = this.handleChange.bind(this);
}
// Make sure class has a render method
render () {
return ()
}
}
And inside your <Select> You can reference it to handleChange
<select onChange={this.handleChange}>
You can read more about onChange Here
You need to pass the event param and then grab the value from the target of that event e.g.
onChange={(event) => this.setState({value: event.target.value})}
There's a great example here.
Full code excerpt from linked docs:
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}

React: component only rendering new values on second onClick of button

I making a react app and I have a parent component Search with child components Input and Result. Input has a drop down menu which passes a value, genreValue, to Search, through a callback function when a button is clicked. Search then makes an api call, which works fine.
My problem is it takes two clicks of the button for the new API data to render. Looking at other SO questions I suspect I need to pass genreValue as an argument to the cb function, or my onClick is only initialising, rather than invoking it on the first click.
It's a pretty simple app so I wouldn't think Flux etc would be needed. My console logs seem to show the value being changed in the Search and Input components.
So what am I doing wrong?
Search.js
let Search = React.createClass ({
getInitialState(){
return {
movies: ['Men In Black'],
genreValue: '12'
};
},
componentDidMount(){
this.getMovies()
},
getMovies(){
let genre = this.state.genreValue;
let url = `http://api.themoviedb.org/3/discover/movie?${key}&with_genres=${genre}`;
Request.get(url).then((response) => {
console.log('response.body.results', response.body.results)
this.setState({
movies: response.body.results.map(function(movie){
return movie.title
})
});
});
},
handleGenre(newGenre) {
this.setState({ genreValue: newGenre })
return this.getMovies();
},
render(){
console.log(this.state.movies)
console.log('genreValue state', this.state.genreValue)
return (
<div>
<Input genre={this.state.genreValue} onGenreChanged={this.handleGenre}/>
<ul>
{this.state.movies.map( function(movie){
return <Results key={movie.id} data={movie}/>;
})}
</ul>
</div>
);
}
});
export default Search;
Input.js
let Input = React.createClass ({
selectHandler(){
return this.props.onGenreChanged(this.refs.genre.value);
},
render() {
console.log('genreValue prop', this.props.genre);
console.log('refs', this.refs.genre)
return <div>
<select ref="genre">
<option value="28">Action</option>
<option value="12">Adventure</option>
<option value="16">Animation</option>
<option value="35">Comedy</option>
<option value="80">Crime</option>
<option value="99">Documentary</option>
<option value="18">Drama</option>
<option value="10751">Family</option>
<option value="14">Fantasy</option>
<option value="10769">Non-english</option>
<option value="36">History</option>
</select>
<button onClick={this.selectHandler} value="Go">Go</button>
</div>
}
});
export default Input;
In the handleGenre function, state may not have updated when this.getMovies is called. You could change it to the following:
handleGenre(newGenre) {
this.setState({ genreValue: newGenre }, function() {
return this.getMovies();
});
},
Or, probably better practice would be to call this.getMovies in a componentDidUpdate lifecycle function if genreValue has changed:
componentDidUpdate: function(prevProps, prevState) {
if (prevState.genreValue !== this.state.genreValue) {
this.getMovies();
}
}

How to two-way bind select element with prop in React

Whats the approved way to create select element in react, which is two way bound with the prop of selection containing component? The default selection should be the present attribute of the prop (may be generated, because the value is arbitrary, and on selection the prop attribute should reflect the selection. Also, it should be possible to write the value directly to the selection field.
There isn't an "approved" way as such, but you should note a couple of things:
The change event is triggered on the element, not the element.
Controlled and uncontrolled components defaultValue are set differently.
This is a generic example of a controlled dropdown menu
var MyDropdown = React.createClass({
getInitialState: function() {
return {
value: 'select'
}
},
change: function(event){
this.setState({value: event.target.value});
},
render: function(){
return(
<div>
<select id="fruit" onChange={this.change} value={this.state.value}>
<option value="select">Select</option>
<option value="Apples">Apples</option>
<option value="Mangoes">Mangoes</option>
</select>
<p></p>
<p>{this.state.value}</p>
</div>
);
}
});
React.render(<MyDropdown />, document.body);
and here's a working demo.
I add the options to an array on state and then map overthem,
try this code
import React, { Component } from 'react'
class SelectExample extends Component {
constructor() {
super()
this.state = {
options: ['One', 'Tow', 'Three'],
selectedOption: 'One',
}
}
handleChange = e => {
this.setState({
[e.target.name]: e.target.value,
})
}
render() {
return (
<select name='selectedOption' onChange={this.handleChange}>
{this.state.options.map(i => i == this.state.selectedOption ? (
<option value={i} selected>
{i}
</option>
) : (<option value={i}>{i}</option>) )}
</select>
)
}
}

Categories