How to write a select field using the function React.createElement() in react

Question

i have this code written in html

<select id ='Font_Size' onchange="ChangeFont()">
            <option>Font Size </option>
            <option id ='sizeUp'>Large </option>
            <option id ='normal'>Normal</option>
            <option id ='sizeDown'>Small</option>
</select>

React.createElement('input',{type:'select',onChange:this.ChangeFont},React.createElement("input",{type:"Option"}))

but i would like to create a react element that will create a selection field using the function React.createElement() and display it as the above code would. the code at the bottom is what i had tried but it does not work

I believe the element type should be select, not input. I think what you wrote would generate html something like <input type="select" onchange=... — Ted
– Ted, Commented Dec 6, 2018 at 19:56
i don't think i understand...what is want to do is rewrite the select tag and its options using the React.createElement() function — swift_dande
– swift_dande, Commented Dec 7, 2018 at 3:43

Ted · Accepted Answer · 2018-12-07 15:37:19Z

5

What you were creating was an <input/>, you want to create a <select/>. Run the following snippet to see the code in action:

var App = React.createClass({
  render() {
    return React.createElement("select", {},
      React.createElement("option", {value: "A"}, "Option A"),
      React.createElement("option", {value: "B"}, "Option B"),
      React.createElement("option", {value: "C"}, "Option C")
    );
  }
});

ReactDOM.render(<App label="this is the label prop" />, document.getElementById('react'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>
<div id="react"></div>

answered Dec 7, 2018 at 15:37

Ted

14.9k2 gold badges43 silver badges58 bronze badges

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

1 Comment

swift_dande Over a year ago

It Worked thanks Ted.. i didn't understand how to add the options

Collectives™ on Stack Overflow

How to write a select field using the function React.createElement() in react

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related