1

My react page consist of three dropdown list, each dropdown has it own respective set of data, which is being pulled from a json file. My issue is, one of the dropdown list repeats the client's name several times (the clients name comes up more then once in the dropdown). Is there a way to prevent the client's name from duplicating?

this is my code: 

import React, { Component } from 'react';


class Ast extends Component {

   constructor(){
       super();
       this.state = {
           data: [],
           cfmRateFactor: "10",
       };
   } //end constructor

   change = (e) => {
    this.setState({
        [e.target.name]: e.target.value
    });
}; //end change

    removeDuplicates(arr) {
 let data = arr.filter(function(elem, index, self) {
    return index == self.indexOf(elem);
 });
 return unique_array
}

   componentWillMount() {
    fetch('https://api.myjson.com/bins/b1i6q', {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'Content-type': 'application/json',
        },
        /*body: JSON.stringify({
            username: '{userName}',
            password: '{password}'
        })*/
    }) /*end fetch */
    .then(results => results.json()) 
    .then(data => this.setState({ data: data })   
)

} //end life cycle

    render() {
        console.log(this.state.data);
        return (
            <div>

                <div className="container">
                    <div>
                        <form>
                            <div>
                                <h2>Memeber Selection:</h2>

                                    {['clientName', 'siteName', 'segmentName'].map(key => (
                                        <div className="dropdown-padding">
                                        <select key={key}  className="custom-select">
                                        {this.state.data.map(({ [key]: value }) => <option key={value}>{value}</option>)}
                                        </select> 
                                        </div>
                                    ))}

                            </div>

                            <div className="txt_cfm">
                                        <label for="example-text-input">Modify CFM Rate Factor:</label>
                                        <input class="form-control" type="textbox"  id="cfmRateFactor" name="cfmRateFactor" value={this.state.cfmRateFactor} onChange={e => this.change(e) } />
                                    </div>
                                    <div>
                                    <div>
                                            <button type="submit" className="btn btn-primary">Submit</button>
                                        </div> 
                                </div>

                            </form>
                    </div>
                </div>

            </div>


        );
      }
}

export default Ast
user1724708
  • 1,409
  • 7
  • 31
  • 53
  • 1
    Filter the data from the response in the second `.then()`, before you put it in the state. There's examples on how to remove duplicate values from arrays, like this one using ES6's `filter()`: https://stackoverflow.com/questions/1960473/get-all-unique-values-in-an-array-remove-duplicates – Jayce444 May 07 '18 at 14:59
  • 1
    If you'd like a prebuilt way to filter array data, you can use lodash's `uniq`, `uniqBy`, or `uniqWith`. https://lodash.com/docs/4.17.10#uniq – taylorc93 May 07 '18 at 15:09
  • @taylorc93 - so in using uniqBy, would I implement it into the second .then()? if so, how? ...I'm new to using ReactJS / fetch. – user1724708 May 07 '18 at 15:26
  • @jayce - I modified the above code by adding a function (removeDuplicates) to filter out the array containing the json data. I'm new to react js though, how could I implement the function to where my dropdown lists will not contain duplicates? Could you take a look at my modification and let me know if am on the right path? thanks – user1724708 May 07 '18 at 16:21
  • In your fetch callback where you set the state 'data' object: `.then(data => this.setState({ data: data })`, you should instead set it to the return value of your function: `.then(data => this.setState({ data: this.removeDuplicates(data) })` – Jayce444 May 08 '18 at 04:57

0 Answers0