Recentemente, comecei a trabalhar com o react e estou enfrentando um problema.

Atualmente, tenho o seguinte trecho de código

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

Isso fica na minharender() função.

No entanto, eu tenho exatamente esse mesmo pedaço de código de cópia / colado mais 5 vezes com apenas pequenas alterações. Desejo extraí-lo para uma função, mas não tenho certeza de como faria isso.

Onde devo colocar a função? -No interior do método render ()?

O que devo retornar com isso? - Uma string que contém o html e as variáveis nos espaços reservados {}?

Eu simplesmente chamo isso dentro do html?