read data of dropdown list from databse in react

Question

here's a part of code that i wrote using reactjs where i am using 3 dropdown lists. Actually i am giving data manually (Source1, Source2, Source3, tech1,tech2,tech3...) but now i won't to get them from database 'Mysql' how can i transform my code in order to read them directly and dynamically?

import React, { Component } from 'react';
import {
  Container, Col, Form,
  FormGroup, Label, Input,
  Button, Dropdown, 
} from 'reactstrap';

import './App.css';
import loupe from'./loupe.png';
class App extends Component {
  render() {
    return (
          
     <div className="box"> 
           
          <div className="element sourcedropdown" >
            <label>Source :</label>
            <select className="form-control" name="Sources" onChange={this.handleInputChange}>
              <option selected>Select Source</option>
              <option value="1">Source1</option>
              <option value="2">Source2</option>
              <option value="3">Source3</option>
            </select>
          </div>
          <div className="element Techdropdown">
            <label>Technology :</label>
            <select className="form-control" name="Tech" onChange={this.handleInputChange}>
              <option selected>Select Technology</option>
              <option className="dropdown-item" value="1">Tech1</option>
              <option className="dropdown-item" value="2">Tech2</option>
              <option className="dropdown-item" value="3">Tech3</option>
            </select>
          </div>
          
          
          <div id="contrat" className="element contrat">
          <label>Contract :</label>
            <select className="form-control" name="Tech" onChange={this.handleInputChange}>
              <option selected>Select contract</option>
              <option className="dropdown-item" value="1">Cont1</option>
              <option className="dropdown-item" value="2">Cont2</option>
              <option className="dropdown-item" value="3">Cont3</option>
              <option className="dropdown-item" value="3">Cont4</option>
            </select>
          </div>
          <div id="checkbox" className ="element checkbox">
          <label check>
          <input type="checkbox" />{' '}
          All
         </label>
          </div>
          </div>  
         
      
    );
  }
}

export default App;

k-wasilewski · Accepted Answer · 2020-11-28 19:05:40Z

1

That's a bigger question than you think. React is just a JS library, a language in which you design how your app will look in your browser; we call it "frontend".

Accessing a database, i.e. a mysql one, is one of most popular tasks performed by "backend", part of your app that performs logic tasks "in the background". If you want to stick to JS it can be Express.js + Node.js.

You can think of them as two separate apps, communicating via endpoints. I suggest you read about the concept of backend/frontend :)

answered Nov 28, 2020 at 19:05

k-wasilewski

4,6914 gold badges18 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

LlMm Over a year ago

Hello, thank u for your answer, i read about routes and axios.. , so when i send a request to my database in order to get those information then i will have them in a struct isn't it? then how can i do a sort of loop in order to make each content of that struct into <option>?

k-wasilewski Over a year ago

When you get your data with the response, in the form of an array, all you have to do is use a js map() function over it.

LlMm Over a year ago

Okayy, Thank uu so much!!

Collectives™ on Stack Overflow

read data of dropdown list from databse in react

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related