Component not showing data on pressing back

Question

The Following code displays the list of countries when component is rendered for the first time.

<select onChange={this.handleLocation} data-live-search="true" className="selectpicker" data-selected-text-format="count" data-size="7" title="Select Country" >
                                    { getNames() && getNames().map(
                                        (e, id) => {
                                            return <option key={e} >{e}</option>
                                        })
                                    }
                                </select>

Note: bootstrap-select is used.

When component is loaded for the first time, the list of countries are displayed properly. But when button is clicked, I am redirecting to another component using

this.props.push('/searchresults')

After pressing back, the component is loaded perfectly but the list of countries are not rendering to the component.

Whats wrong with my code.

FYI: npm i country-list --> Package to get countries

Thanks in advance

mohammadreza khorrami · Answer 1 · 2021-11-23T17:44:10.970

0

Please remove return on the function map also your tag option attribute key must be unique, if even remove function getNames properly didn't any problem on your code. I hope useful.

{getNames().map((e, id) => (<option key={id} >{e}</option>))}

edited Nov 23 '21 at 17:44

answered Nov 23 '21 at 12:56

mohammadreza khorrami

21
8

I didn't see output on first render itself, As per this link https://stackoverflow.com/questions/39999671/map-function-not-working-in-react its mandatory to have return inside map – abdul riyaz Nov 23 '21 at 13:54
sorry for the delay and my mistake, exact good point, curly brackets is wrong so use parentheses {getNames().map((e, id) => ())} – mohammadreza khorrami Nov 23 '21 at 16:40
I figured out that the problem is from CSS actually. The element exists after pressing back in source code. the css is not loading properly from style.css in public folder. – abdul riyaz Nov 23 '21 at 17:46
Congratulations, of course, if you want, you can use my code to compile your code. Good luck – mohammadreza khorrami Nov 23 '21 at 18:12

score 0 · Accepted Answer · answered Dec 09 '21 at 12:36

Basically the component wont render selectpicker after it is mounted. We have to update the dropdown on component mounts.

The Problem is with bootstrap-select library that is being used in this project

I have select dropdown with class of selectpicker.

From this question, I found that the selectpicker class is no longer needed for dropdown. Instead i trigged selectpicker library in componentDidMount everytime.

import $ from 'jquery';
import 'bootstrap-select';

componentDidMount(){
$('select').selectpicker()   <<-- This triggers the library on component mount
}

So the component loads selectpicker everytime it rendered.

Component not showing data on pressing back

2 Answers2