Googlier.com News Article Search
Googlier.com Precious Metals Exchange Smart Contracts
Googlier.com Document Services





          How to create a dynamic dropdown with info fetched from mysql in react js      
http://www.sitepoint.com/community/t/how-to-create-a-dynamic-dropdown-with-info-fetched-from-mysql-in-react-js/341670

@xcfx2888 wrote:

This is my code in my index,jsx file for fetching the info of all students from database

import React, { Component } from 'react'

import * as myConstClass from '../../../constant.js'
class Students extends Component {
  constructor(props) {
    super(props)
    this.state = {
      students: [],
    }
  }
  componentDidMount() {
    fetch(myConstClass.BASE_URL + 'students//get_all_students/')
      .then(response => response.json())
      .then(response => {
        this.setState({ students: response })
      })
      .catch(err => console.log(err))
  }

  render() {
    const { students } = this.state
    return (
      <div>
        <Field
          name="student_id"
          component={renderTextField}
          select
          label="Select student"
        >
          <MenuItem className="material-form__option" value={students.id}>
            {students.first_name}
          </MenuItem>
        </Field>
      </div>
    )
  }
}

but the dropdown is not populating , how can I do it ?

Posts: 4

Participants: 4

Read full topic




Array ( [p] => 12 [gt] => 9 [students] => 7 [lt] => 6 [a] => 5 [response] => 4 [from] => 4 [this] => 3 [code] => 3 [props] => 2 [MenuItem] => 2 [all] => 2 [pre] => 2 [class] => 2 [import] => 2 [Component] => 2 [student] => 2 [myConstClass] => 2 ['] => 2 [id] => 2 [name] => 2 [state] => 2 [Field] => 2 [div] => 2 [then] => 2 [err] => 2 [the] => 2 [my] => 2 [xcfx] => 2 [dropdown] => 2 [info] => 2 [in] => 2 [href] => 2 [is] => 2 [www] => 2 [sitepoint] => 2 [com] => 2 [community] => 2 [http] => 2 [blockquote] => 2 [option] => 1 [Posts] => 1 [log] => 1 [full] => 1 [Read] => 1 [how] => 1 [render] => 1 [const] => 1 [return] => 1 [how-to-create-a-dynamic-dropdown-with-info-fetched-from-mysql-in-react-js] => 1 [populating] => 1 [t] => 1 [Participants] => 1 [not] => 1 [it] => 1 [do] => 1 [but] => 1 [component] => 1 [renderTextField] => 1 [select] => 1 [label] => 1 [first] => 1 [can] => 1 [Select] => 1 [value] => 1 [className] => 1 [I] => 1 [material-form] => 1 [console] => 1 [How] => 1 [catch] => 1 [wrote] => 1 [fetching] => 1 [for] => 1 [file] => 1 [jsx] => 1 [index] => 1 [This] => 1 [u] => 1 [database] => 1 [js] => 1 [react] => 1 [mysql] => 1 [fetched] => 1 [with] => 1 [dynamic] => 1 [create] => 1 [of] => 1 [lang-auto] => 1 [setState] => 1 [super] => 1 [json] => 1 [get] => 1 ['students] => 1 [URL] => 1 [BASE] => 1 [fetch] => 1 [componentDidMount] => 1 [to] => 1 [React] => 1 [constructor] => 1 [extends] => 1 [Students] => 1 [js'] => 1 [constant] => 1 [as] => 1 ['react'] => 1 [topic] => 1 )

© Googlier LLC, 2019