REACT: I needed an easy way to look at values in the map() loop and display a different string for each given value, creating a mapping on the fly. I replaced the values on the left with the values on the right (displayActionMap). Notice the bracket notation to display the rendered value(s).

conditionalDisplayInMapFunction.js

<Table hover>
    <tbody>
    {grades &&
    grades.map((grades) => {

        const displayActionMap = {
            init: 'initiated',
            down: 'downgrade',
            reit: 'reiterates',
            up: 'upgrade',
            main: 'maintains'
            }

    return (
        <tr key={Math.floor(Math.random() * 10019)}>
            <td width="15%">
            {grades.firm} 
            </td>
            <td width="35%">
            {displayActionMap[grades.action]}  
            </td>
        </tr> 
    );
    })
}
    </tbody> 
</Table>