Popular posts

Awesome.. This is what exactly I need. Thanks a lot Diego Bernal. Have one more question :p, Can we make this more dynamic? instead of repeating Object.assign()?. No issues if its not. Thanks for your help.

Could it be the case that you might want this.state.options.location, this.state.options.label, etc, one object for every key ?

Can you please take a look at this? koolkanya.herokuapp.com I have to use the data in select options accordingly.

That's what I was thinking. Here it is dynamically generating objects per each of the keys id, company, position, industry, location, rating, label:

 componentDidMount(){
    const{jobs} = this.state;

    let options = {}
    jobs.forEach(job => {
      Object.keys(job).forEach(key => {
        options[key] = [...options[key] || [], ...[{ value: job.id, label: job[key] }]]
      })
    })

    this.setState({options})
  }

Just pick the ones you need from this.state.options by key.

Nailed it. Is it possible to remove repeating values? in industries, Information technology repeating. How we can avoid that?

Let me give it some thought

Ok, how's that?

  componentDidMount(){
    const{jobs} = this.state;

    let options = {}
    jobs.forEach(job => {
      Object.keys(job).forEach(key => {
        options[key] = [...options[key] ? options[key].filter(o => o.label !== job[key]) : [], ...[{ value: job.id, label: job[key] }]]
      })
    })

    this.setState({options})
  }

Perfect! Thanks Diego Bernal.

No problem. Let me know if you need anything else. You can also email me at hola@godiego.me

Hey Diego Bernal, its really appreciated. Now I am having another problem. I am using multiple select box in my component and whenever I select one options, all select box would be selected. How can I avoid that

Here is my code

import React, { Component } from "react";
import Select from "react-select";
import {
  Jumbotron,
  Container,
  Button,
  Form,
  FormGroup,
  Label,
  Input,
  Row,
  Col
} from "reactstrap";

import {Context, allJobs} from '../Context';

class FirstFold extends Component {

  constructor(props){
   super(props);
   this.state = {
    categorySelected: "companies",
    selected: null,
    inputFields: ['company','position','articles','location', 'industry', 'keywords'],
    jobs: allJobs,
    options: [],
  };
  }

  componentDidMount(){
    const{jobs} = this.state;

      let options = {}
      jobs.forEach(job => {
        Object.keys(job).forEach(key => {
          options[key] = [...options[key] ? options[key].filter(o => o.label !== job[key]) : [], ...[{ value: job.id, label: job[key] }]]
        })
      })

      this.setState({options})
  }


  handleChange = (name , selected) => {
    this.setState({
      selected
    });
  };

  toggleCategory = e => {
    this.setState({
      categorySelected: e.target.value,
      selected: null
    });
  };

  switchCategory = (param) => { 
    const {selected} = this.state
    switch(param){
      case 'companies':
        let companies = this.state.inputFields.filter(item => ((item !== 'position') && (item !== 'articles') && (item !== 'keywords')));
        return(
          companies.map(item =>{
            return(
              <Col md={12 / companies.length}>
                    <FormGroup>
                      <Select
                        placeholder={item}
                        name={item}
                        style={{ width: 100 }}
                        value={selected}
                        isClearable= {true}
                        isSearchable={true}
                        onChange={this.handleChange.bind(this, item)}
                        options={this.state.options[item]}
                      />
                  </FormGroup>
            </Col>
            )
          })
        );
      case 'jobs':
      let jobs = this.state.inputFields.filter(item=> ((item !== 'company') && (item !== 'articles') && (item !== 'keywords')))
      return(
        jobs.map(item =>{
          return(
            <Col md={12 / jobs.length}>
                  <FormGroup>
                    <Select
                      placeholder={item}
                      name="jobOptions"
                      style={{ width: 100 }}
                      value={selected}
                      onChange={this.handleChange.bind(this, "jobOptions")}
                      options={this.state.options[item]}
                    />
                </FormGroup>
          </Col>
          )
        })
      );
     case 'articles':
     let articles = this.state.inputFields.filter(item=>  ((item !== 'company') && (item !== 'position') && (item !== 'location') && (item !== 'industry')))
     return(
      articles.map(item =>{
        return(
          <Col md={12 / articles.length}>
                <FormGroup>
                  <Select
                    placeholder={item}
                    name="jobOptions"
                    style={{ width: 100 }}
                    value={selected}
                    onChange={this.handleChange.bind(this, "jobOptions")}
                    options={this.state.options[item]}
                  />
              </FormGroup>
        </Col>
        )
      })
    );

    }
  }

  render() {
    const { categorySelected} = this.state;
    return (
      <Context.Consumer>
        {value => {
          return(
            <div className="vh-100 d-flex align-items-end justify-content-center">
        <Container className="center">
          <Jumbotron>
            <h1 className="display-3">Welcomes you!</h1>
            <p className="lead">Search your favorite comapnies and jobs here</p>
            <Form
              onSubmit={e => {
                e.preventDefault();
              }}
            >
              <Row>
                <FormGroup check>
                  <Label className="mr-2" check>
                    <Input
                      type="radio"
                      value="companies"
                      checked={categorySelected === "companies"}
                      onChange={this.toggleCategory}
                    />
                    Companies
                  </Label>
                </FormGroup>
                <FormGroup check>
                  <Label className="mr-2" check>
                    <Input
                      type="radio"
                      value="jobs"
                      checked={categorySelected === "jobs"}
                      onChange={this.toggleCategory}
                    />
                    Jobs
                  </Label>
                </FormGroup>
                <FormGroup check disabled>
                  <Label className="mr-2" check>
                    <Input
                      type="radio"
                      value="articles"
                      checked={categorySelected === "articles"}
                      onChange={this.toggleCategory}
                    />
                    Articles
                  </Label>
                </FormGroup>
              </Row>
              <FormGroup />
              <Row form>
              {this.switchCategory(this.state.categorySelected)}
              </Row>
              <Button type="submit">Submit</Button>
            </Form>
          </Jumbotron>
        </Container>
        <div className="d-flex flex-column bottom-center">
          <span className="btn">Know more</span>
        </div>
      </div>
          )
        }}
      </Context.Consumer>

    );
  }
}
export default FirstFold;

Can you please take a look?

Well, they all use the same this.state.selected, so yeah, selecting one would select them all. Seems to that you want a state property for each of the <Select/>, i.e - this.state.selectedLocation, this.state.selectedIndustry, etc.

A better option might be to wrap the <Select/> component in a custom component that managed it's own state. That way each select would be decoupled from the parent's state

Ok.let me try that. But here I am using map to create select fields as per the categories that you may noticed. Does it create any problem?

I want to say no but it's hard to tell without debugging. Is it possible to get this on a codepen or is it on a repository somewhere?

Please take a look at this Sandbox sample. This is what I exactly need.

codesandbox.io/s/vm4pkq66l3

Select box will generate dynamically and I have to store the data from each select to the state. As you said we can store that in a parent wrapper. But I could not figure out the logic.

Question: Does the parent container need to know about the <Select/>'s values? Or will each <Select/> do their own work with that?

If the parent container doesn't care, then the <Select/> can manage it's own state. If that's the case, then this would work (you had that already but you commented it out): codesandbox.io/s/k08z88kj47

If the parent needs to know the selected values, then you need a controlled component. This would work:

codesandbox.io/s/4w6n4lx700

Perfect. Thanks Diego Bernal