How to render conditional form in reactJS?

Question

Conditionally, when having in imported array attribute called ' entry ', I want to render form ' write ', but ' write ' is not displayed in the browser (no errors in console). Should I use child component for this, or maybe you have ideas for other approaches?

The code:

render() {
        var replyList = questions.map(reply => {
            return (
                reply.feedback.map(singleReply => {
                    return (
                        <div>
                            <button
                                key={singleReply.id}
                                value={singleReply.button}
                                goto={singleReply.goto}
                                onClick={this.onButtonClick}>
                                {singleReply.button}
                            </button>
                        </div>
                    );
                })
            );
        });
        var write = (evt) => {
            //argument dla input
            var toWrite = questions[this.state.currentDialog].entry;
            //jeśli jest entry'
            if (questions[this.state.currentDialog].entry)
                return (
                    <form onSubmit={this.onInputSubmit}>
                        <label value={toWrite.label} />
                        <input
                            name={toWrite.name}
                            value={toWrite.value}
                            onChange={this.onInputChange}
                        />
                        <input type='submit' />
                    </form>
                );
        };
        return (
            //questions - pytanie, replyList - lista odpowiedzi
            <div className="App">
                {questions[this.state.currentDialog].question}
                <br /><br />

                {replyList[this.state.currentDialog]}
                {this.write}
                <br /><br />

            </div>)
    }

Piece of my array:

{
        //[0]
        id: uuid.v4(),
        question: 'dialog1',
        feedback: [
            { button: 'reply1-1', goto: 1, id: uuid.v4() },
            { button: 'reply1-2', goto: 2, id: uuid.v4() },
            { button: 'reply1-3', goto: 3, id: uuid.v4() },
            { button: 'reply1-4', goto: 4, id: uuid.v4() }
        ],
        entry: { label: 'input1-1', name: 'input1', value: '1', id: uuid.v4() }
    },

Answer 1

Inorder to display the write you need to call it as

  return (
            <div className="App">
                {questions[this.state.currentDialog].question}
                <br /><br />

                {replyList[this.state.currentDialog]}
                {write()}
                <br /><br />
            </div>)

this is not required since the write is defined inside the render method.You should also keep in mind the problem with putting functions inside render method.

A function in the render method will be created each render which is a slight performance hit. It's also messy if you put them in the render, which is a much bigger reason, you shouldn't have to scroll through code in render to see the html output. Always put them on the class instead.

Answer 2

write is part of the local scope for render, no need to call this.write . simply call write . More on this you have to call the function as well: write()

To add to this, not really part of the question but you will get an error. Every component has to return a 'component-like' value. If the condition is not fulfilled the write function will return undefined which will throw an error. Returning null will not throw an error as it's 'component-like'