How I can remove not related to render data? - reactjs

Question

How can I remove arrays from the render that, in fact, should not be there (commitsContentValues, membersContentValues, commitsValue, memberValue) and move it to separate methods. How can I make my code cleaner? And in which chapter of the reсt documentation is it described?
export default class Content extends Component {
constructor(props) {
super(props);
this.state = {
iteams: {},
};
}
async componentDidMount() {
membersData = 123
commitsData =zxc
this.setState({
iteams: { membersData, commitsData },
});
} catch {
console.log(err);
}
render() {
const { iteams } = this.state;
const commitsContentValues = { //this
firstRowText: "Date",
secondRowText: "Author",
thirdRowtext: "Commit Message",
firstRowKey: "committed_date",
secondRowKey: "author_name",
thirdRowkey: "title",
};
const membersContentValues = { //this
firstRowText: "Username",
secondRowText: "Name",
thirdRowtext: "GitLab Id",
firstRowKey: "username",
secondRowKey: "name",
thirdRowkey: "id",
};
const commitsValue = { //this
dataKey: "commitsData",
arrKey: "commits",
};
const memberValue = { //this
dataKey: "membersData",
arrKey: "members",
};
return (
<div>
{this.props.idx === 0 && (
<BasicTable
commits={iteams.commitsData}
commitsData={commitsContentValues}
keys={commitsValue}
></BasicTable>
...

Answer 1

The easiest solution is to just have the values you want returned from a function as you said:
export default class Content extends Component {
constructor(props) {
super(props);
this.state = {
iteams: {},
};
}
function getCommitsContentValues() {
return {
firstRowText: "Date",
secondRowText: "Author",
thirdRowtext: "Commit Message",
firstRowKey: "committed_date",
secondRowKey: "author_name",
thirdRowkey: "title",
};
}
render() {
return (
<div>
<BasicTable
commitsData={this.getCommitsContentValues()}
></BasicTable>
</div>
)
}
}
Is this what you are trying to do?