Условия в опции рендеринга [материал-таблица]

Question

Я использую таблицу материалов (https://material-table.com/# / ), и мне нужно изменить значок в столбце в соответствии с его значением. Возможно ли это сделать в опции рендеринга:

render: rowData => (
    <div>
        <i className="far fa-map-marker"></i>
        <span>{rowData.locationName}</span>
    </div>
)

Заранее спасибо!

Answer 1

Я не знаю, правильно ли я понимаю, что вы хотите, но вот, что я могу предположить, что вы хотите:

import React, { useState } from "react";
import "./App.css";

import { Add, Delete } from '@material-ui/icons'

function App(props) {
    const [value, setValue] = useState("");

    const test = [<Add/>,<Delete/>];

    return (
        <div className="App">
            {test.map(e => { return e })}
        </div>
    );
}

export default App;

Answer 2

Go с:

render: rowData => (
    <div>
        <i className={`far ${rowData.value === someValue ? "first-icon" : "second-icon"}` }></i>
        <span>{rowData.locationName}</span>
    </div>
)

Если есть другие варианты, я бы предложил перейти с:

const valueToIconMap = { someValue: "first-icon", anotherValue: "second-icon", ...more values }
...somecode...
render: rowData => {
    return <div>
        <i className={`far ${valueToIconMap[rowData.value]}`}></i>
        <span>{rowData.locationName}</span>
    </div>
}