CODEWITHSUNDEEP
javascriptreactjs
maxwellgover
maxwellgover

Reputation: 7111

Rendering a dynamic input field in React

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>    
        );
    }

Upvotes: 0

Views: 1035

Answers (2)

Bruno Barbosa
Bruno Barbosa

Reputation: 94

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,

Upvotes: 0

Akshat Mahajan
Akshat Mahajan

Reputation: 9846

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.

Upvotes: 2

Related Questions