OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

ReactJS Search and Dropdown filter synchronised

  • Thread starter Thread starter ZombieChowder
  • Start date Start date
Z

ZombieChowder

Guest
I have a search and dropdown options on my ReactJS page which I want to synchronize. Meaning that whenever you select an element from the dropdown options, the elements on the screen display only the selected filter.

The search input currently works but I am having issues with the select options. I found a working example (this one here) of a select filter but I am having issues adapting it for my solution.

I think that this function here is the main one for filtering data but I am quite unsure:

Code:
changeOption: function(type, e) {
    var val = e.target.value;
    this.props.changeOption(val, type);
  }
How can I filter data based on select options value?

Here is a JSFiddle example of my code: JS Fiddle Example

<p>I have a <strong>search</strong> and <strong>dropdown</strong> options on my ReactJS page which I want to synchronize. Meaning that whenever you select an element from the dropdown options, the elements on the screen display only the selected filter.</p>

<p>The search input currently works but I am having issues with the <strong>select options</strong>. I found a working example (<a href="https://codepen.io/amwill/pen/OyByPq?editors=1010" rel="nofollow noreferrer">this one here</a>) of a select filter but I am having issues adapting it for my solution.</p>

<p>I think that this function here is the main one for filtering data but I am quite unsure:</p>

<pre><code>changeOption: function(type, e) {
var val = e.target.value;
this.props.changeOption(val, type);
}
</code></pre>

<blockquote>
<p>How can I filter data based on select options value?</p>
</blockquote>

<p>Here is a JSFiddle example of my code: <a href="https://jsfiddle.net/t5voxw8c/1/" rel="nofollow noreferrer">JS Fiddle Example</a></p>
 

Latest posts

Top