I'm stuck on the following issue from a project I have taken over. I have a page that has a component with an IonSelect. The options of the select are loaded from data obtained from a server and set in the state whilst being passed as a prop to the select, There is also a user object being loaded that contains a value that should be used as a pre selected value. The IonSelect doesn't show the pre selected text value when screen loads. If I click the IonSelect then the selected value shows. I tried a timeout to see if the render was happening before the data is loaded but it makes no difference. This question here shows the same problem but for an angular app. Is there something similar I can do for react?
The previous dev was new to react so I'm trying to refactor some code for efficiency and readability. Is there any advice that can be offered without code being uploaded? Currently, select is in a 5th child component and is using prop drilling to pass the data down.
Update: please see some of the code I've managed to pull for this issue.
I have tried using a standard html select and the pre selected value shows fine, so the problem is maybe within the IonSelect element or its wrapper? I have also tried overriding the compare to function of the select as explained in the docs. No joy. I've spent too many hours trying to solve this to no avail.
<IonItem className="statusField">
<IonLabel position="stacked">Job Status</IonLabel>
<IonSelect
id="jobStatus"
value={props.theJob.jobStatus!.toString()}
style={{color: getStatusColour(props.theJob.jobStatus)}}
interface="popover"
onIonChange={(e) => {
console.log("the value")
//document.getElementById("jobStatus")!.style.color = getStatusColour(parseInt((document.getElementById("jobStatus") as HTMLInputElement).value));
props.switchCancel();
props.setDirtyFlag(true);
}}>
{props.theJob.jobStatus && props.jobStatuses?.map((jobStatus, i) =>{
return<IonSelectOption
key={`Jstat ${i}${jobStatus.recordID}`}
value={jobStatus.recordID.toString()}
>
{jobStatus.summaryStatus.toString()}</IonSelectOption>
})}
</IonSelect>
</IonItem>
UPDATE
I think I've got it going. I had to do the following but it now renders the pre-selected value on screen refresh and page load.
In the component i added a Ref to the select and updated the selected value using a useEffect with a watch on my prop:
let mySelect = useRef<HTMLIonSelectElement|null>(null)
React.useEffect(()=>{
mySelect.current!.value = props.theJob.jobStatus?.toString();
},[props.theJob.jobStatus])
In the IonSelect I set the ref and also set the value of the select to the refs current value:
<IonSelect
id="jobStatus"
ref={mySelect}
value={mySelect.current?.value} ....
Finally, in the parent component where the data is being fetched. I ensure I await the fetch of the options of the select prior to awaiting the data for the preselected value fetch. Its now working as expected. The UI seems responsive and there doesn't seem to be a noticeable overhead. Hopefully it will help someone if they stumble upon this.
Related
I am implementing a form in react using react hook form, The form has two select fields country and states.
Second field changes the option based on the selection in first field.
Please see the below sandbox for more details
Creating/submitting the record works perfectly fine.
The problem is: In edit, when I pre populate the values in the form using setValue(), it does not set the second dropdown(state select in the sandbox below) values on the UI but it shows that it has set the value to the field(see in the console for field state).
[CodeSandBox] https://codesandbox.io/s/angry-murdock-h0lbsp?file=/src/App.js
Steps to reproduce:
Open this sandbox in the browser.
Click on the SET ALL VALUES button.
See the blank value in states select
Also, Whats the best way to populate a form like this, i.e. in defaultsValues or useEffect?
What am I missing here, so putting it for the experts here.
Thanks for your time.
The problem you are having is about setValue. This function does not trigger a re-render in most cases. You can use reset instead.
https://react-hook-form.com/api/useform/reset
Also, if you'd like to fill the form without any user interaction, use reset in useEffect with proper dependencies.
Lastly, If you'd like to have just them having initial values instead of being undefined, set defaultValues. It is also recommended in official documents:
Important: You should provide a proper default value and avoid undefined.
undefined is reserved for fallback from inline
defaultValue/defaultChecked to hook level defaultValues. undefined value is conflicting with controlled component as default state
https://react-hook-form.com/api/useform
I am implementing a react-table component containing server-side pagination and I need sorting on the columns as well.
However I am observing strange behaviors. When I am using only pagination and click on next page the pageIndex is getting incremented.
However when I add sorting hooks then then pagination in not working. The pageIndex is getting back to 1 automatically and I am not able to figure it why.
Can any one help me out. Below is sandbox link https://codesandbox.io/s/eager-breeze-9cw0r.
When making changes to the external data you want to disable automatic resets to the state of the table (see https://react-table.js.org/faq#how-do-i-stop-my-table-state-from-automatically-resetting-when-my-data-changes for more info). So in your case changing the page modifies the data you're passing to the table, which leads to the state of the table being reset.
In order to stop this you need to set autoResetPage to false. Eg:
useTable<FormattedRowData<T>>(
{
autoResetPage: false
});
I made the change to your sandbox and this resolved the issue.
I have a React application using Material UI with a component (which we can call DatePicker) shown below, sneakily changed for demo purposes.
Material UI animates clicks and other interactions with its components. When clicking a radio button that has already been selected, or a "time button" which doesn't change state, this animation is visible above. However, when such a click changes the state, the animation get interrupted.
I can see why this happens from a technical perspective; the DatePicker component calls setMinutes, which is a property passed in from its parent (where the state lives). This is a React.useState variable, which then updates its corresponding minutes variable. Minutes is then passed into DatePicker, which re-renders due to a prop change.
If state lived within DatePicker then this problem shouldn't rear its head; however, DatePicker is one part of a much larger form which dictates the contents of a table in the parent. To generate rows for this table, the parent must have this information.
Below is a sample reconstruction of the parent:
const Parent = () => {
const [minutes, setMinutes] = React.useState(15);
const [radioOption, setRadioOption] = React.useState('Thank You');
// Many other state variables here to hold other filter information
return (<div>
<DatePicker minutes={minutes} setMinutes={setMinutes} radioOption={radioOption} setRadioOption={setRadioOption}/>
</div>);
};
And here a sample reconstruction of DatePicker:
const DatePicker: React.FC<DatePickerProps> = props => {
const {minutes, setMinutes, radioOption, setRadioOption} = props;
return (<div>
<Radios value={radioOption} onChange={val => setRadioOption(val)}/>
<Minutes value={minutes} onChange{val => setMinutes(val)}/>
</div>);
};
I'm not sure what the best practice is in this situation, but I get the distinct feeling that this is not it. Does anyone have any advice? Thanks in advance!
Thank you for your comment, Ryan Cogswell. I did create a code sandbox, and found that the problem was not about React state management as much as what I was doing beyond what I provided in my question.
I was using the withStyles HOC to wrap my component, in a way similar to const StyledDatePicker = withStyles(styles)(DatePicker). I then used that styled element and put properties (minutes, etc) on that.
It turns out that using the unstyled DatePicker resolves this issue. I troubleshooted this further, and found that I had created the "Styled" component within the "render" method of the parent, meaning every time a prop change was pushed up the chain, the parent would re-render and the entire "Styled" component type would be created again (or so I believe). This would break reference integrity, which explains the "drop and recreate" behaviour.
This teaches the valuable lesson of keeping components small and using code sandboxes for troubleshooting. Thanks again!
For anyone interested, here is the Code Sandbox used for testing.
I'm trying to implement this example that obtains the user selected value, but using the async select version.
I want to obtain the value that the user selected, but going through the docs on react-select this isn't clear how to do. If you set state equal to the inputValue, as soon as you click on the 'submit' button the inputValue is cleared. You get back
" "
instead of
user selected value
I'm not sure how to obtain the user selected value using the async select component. I have my API data successfully populating & filtering the suggestions box, but I can't figure out how to get the selected value.
I've tried numerous methods and lastly tried using the refs approach like in the above link, but the stored value shows up as null. Instead of storing the user selected value. Here is the link to my broken codesandbox.
Can anyone help or point me in the right direction?
Edit
Here is a link to a working demo if anyone gets stuck on this in the future.
So, what you got wrong is props of react-select to get value on on-change. Use onChange instead of onInputChange on your AsyncSelect Component. Both props are for different purpose. Here is a doc for all props available for react-select. https://react-select.com/props
Try code below
textChange = inputValue => { // whole object of selected option
this.setState({ inputValue:inputValue.value });
};
render(){
....
<AsyncSelect
defaultOptions
loadOptions={this.promiseOptions}
onChange={this.textChange} /** onChange triggers only when user change the
options but onInputChange triggers on each change which is for different
purpose like for e.g. when user type, fetch similar options **/
name="options"
/>
}
So, I've been working through my first ReactJS app. Just a simple form where you type in a movie name and it fetches the data from IMDB and adds them as a module on the page. That's all working fine.
However each movie module also had a remove button which should remove that particular module and trigger a re-render. That's not working great as no matter which button you click it always removes the last movie module added rather than the one you're clicking on.
App:
http://lukeharrison.net/react/
Github codebase:
https://github.com/WebDevLuke/React-Movies
I'm just wondering if anybody can spot the reasoning behind this?
Cheers!
Just a hunch, but you should use a unique key, not just the index of the map function. This way React will understand that the movies are identified not by some iterating index, but an actual value, and that will probably solve your issue.
var movies = this.state.movies.map(function(movie, index){
return (
<Movie key={movie} useKey={index} removeMovieFunction={component.removeMovie} search={movie} toggleError={component.toggleError} />
);
});
This is because React re-evaluates your properties, sees that nothing has changed, and just removes the last <Movie /> from the list. Each Movie's componentDidMount function never runs more than once, and the state of Movie 1, Movie 2 and Movie 3 persists. So even if you supply search={movie} it doesn't do anything, because this.props.search is only used in componentDidMount.
I'm not exactly sure why it isn't rendering correctly as the dataset looks fine.
Looking at the code, I would change your remove function to this...
var index = this.state.movies.indexOf(movieToRemove);
console.log(this.state.movies);
if (index > -1) {
this.state.movies.splice(index, 1);
}
console.log(this.state.movies);
this.setState(this.state.movies);
My assumption is that, the state isn't being updated correctly. Whenever updating state, you should always use setState (unless the convention changed and I wasn't aware).
Also, you shouldn't need to explicitly call forceUpdate. Once setState is called, React will automatically do what it needs to and rerender with the new state.
State should be unidirectional (passed top down) from your top level component (known as a container). In this instance, you have state in your top level component for search strings and then you load individual movie data from within the "Movie" component itself via the IMDB API.
You should refactor your code to handle all state at the top level container and only pass the complete movie data to the dumb "Movie" component. all it should care about is rendering what you pass in it's props and not about getting it's own data.