Rendering a dynamic input field in React

Question

I have a quiz form here and would like to add input fields for questions when a user clicks the "Add a question" button.

I've been playing around with the code and have been able to populate the state object with some text. Obviously, the goal is to have this be an input component and then somehow rendering this to the screen.

What I'm struggling with is how to render an actual element to the page. I know it's done in the render method of the component just not exactly sure how.

I think I'm getting close. Any help would be appreciated. The code is below.

Thanks!

 var QuizForm = React.createClass({
        getInitialState : function() {
            return { questions : [] }
        },
        createQuestion : function() {

        this.state.questions.push("Test");

        // Adds "Test" to state object. 
        this.setState({
            questions : this.state.questions
        });
    },
    render : function() {
        return (
            <div className="quiz-form well text-center">
                <h1 className="header text-center">Quiz Form</h1>
                <ul>
                    {/* Would like question inputs to show up here */}
                </ul>
                <button onClick={this.createQuestion} className="add-question-btn btn btn-primary" style={{ marginTop : 40 }}>Add Question</button>
            </div>    
        );
    }

Community · Accepted Answer · 2017-05-23 12:08:59Z

2

Just map your this.state.questions array to the HTML element you want.

For instance, if you want to render <li> elements:

render : function() {
    return (
        <div className="quiz-form well text-center">
            <h1 className="header text-center">Quiz Form</h1>
            <ul> // magic happens now
                {this.state.questions.map(function(state) {
                   return <li>{state}</li>
                })}
            </ul>
            <button onClick={this.createQuestion} 
               className="add-question-btn btn btn-primary" 
               style={{ marginTop : 40 }}>Add Question</button>
        </div>    
    );
}

See an example.

If you want to render <input> tags, you can use the same technique above, but be mindful of the fact that React treats it as a controlled component.

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered Jul 20, 2016 at 16:36

Akshat Mahajan

9,8764 gold badges38 silver badges46 bronze badges

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

Comments

Bruno Barbosa · Accepted Answer · 2016-07-20 17:00:46Z

A React best practice would be to map your state.questions array to a dynamically generated HTML component such as:

    render : function() {
    return (
        <div className="quiz-form well text-center">
            <h1 className="header text-center">Quiz Form</h1>
            <ul> // magic happens now
                {this.state.questions.map(function(state) {
                   return <li key={state.someId}>{state.question}</li>
                })}
            </ul>
            <button onClick={this.createQuestion} 
               className="add-question-btn btn btn-primary" 
               style={{ marginTop : 40 }}>Add Question</button>
        </div>    
    );
}

Please keep in mind that when mapping and rendering dynamic objects in React it's always good to insert a key for each mapped object. So make sure to create that when you're creating the content.

Best Regards,

Collectives™ on Stack Overflow

Rendering a dynamic input field in React

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related