React. Creating a function that returns html

Question

I recently started working with react and I am facing a bit of an issue.

Currently I have the following piece of code

<div className="col-md-4"><h4>ML</h4>
{
    game.lines.map(function (lineGroup) {
        return (
            <div className="row">
                <div className="col-md-1">
                    {lineGroup.Pay}
                </div>
                <div className="col-md-3">
                    <strong>{getLineInfo(lineGroup.HomeInfo)}</strong>
                </div>
                <div className="col-md-3">
                    <strong>{getLineInfo(lineGroup.Score)}</strong>
                </div>
                <div className="col-md-3">
                    <strong>{getLineInfo(lineGroup.AwayInfo)}</strong>
                </div>
            </div>
        )
    })
}

This sits in my render() function.

However I have this exact same piece of code copy/pasted 5 more times with only minor changes. I wish to extract it to a function, but I am not sure how would I do this.

Where should I place the function ? -Inside the render() method?

What should I return from it? - A string that contains the html and variables in {} placeholders?

Do I simply call it within the html?

Is it exactly the same, just repeated 5 times?

Chris
– Chris

2017-10-26 13:42:24 +00:00
Commented Oct 26, 2017 at 13:42 — Chris
– Chris, Commented Oct 26, 2017 at 13:42
No, the contents of the seconds <strong> tag change.

Kobek
– Kobek

2017-10-26 13:53:27 +00:00
Commented Oct 26, 2017 at 13:53 — Kobek
– Kobek, Commented Oct 26, 2017 at 13:53

Vivek Doshi · Accepted Answer · 2017-10-26 13:53:43Z

41

Create function like this :

function gameLines(game) {
    return game.lines.map(function (lineGroup) {
        return (
            <div className="row">
                <div className="col-md-1">
                    {lineGroup.Pay}
                </div>
                <div className="col-md-3">
                    <strong>{this.getLineInfo(lineGroup.HomeInfo)}</strong>
                </div>
                <div className="col-md-3">
                    <strong>{this.getLineInfo(lineGroup.Score)}</strong>
                </div>
                <div className="col-md-3">
                    <strong>{this.getLineInfo(lineGroup.AwayInfo)}</strong>
                </div>
            </div>
        )
    })
}

Use like this :

<div className="col-md-4"><h4>ML</h4>
    { this.gameLines(game) }
</div>

Dont forget to bind the functions

constructor() {
    ...
    this.gameLines = this.gameLines.bind(this);
    this.getLineInfo = this.getLineInfo.bind(this);
}

answered Oct 26, 2017 at 13:53

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

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

2 Comments

David Spector Over a year ago

How is it possible to return HTML code from a JavaScript function? This question was asked elsewhere in 2017 and there is no answer yet. Anyone understand this?

David Spector Over a year ago

It is apparently a new language called JSX: reactjs.org/docs/introducing-jsx.html . I imagine it only works with react.

Collectives™ on Stack Overflow

React. Creating a function that returns html

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related