CODEWITHSUNDEEP
reactjs
aharris
aharris

Reputation: 37

Different alt attribute for images being filter in react

I have an image grid showing different icons that are being filtered from my component GetToolIcon. I want to add an alt attribute with different strings for each one of them. How can I accomplish that?

Here is my code on my grid:

<div className='tool-item-content'>
        <Thumbnail src={getToolIcon(props.tool.id)} />
        <h3>{props.tool.toolName}</h3>
      </div>

my component:

export function getToolIcon(toolId) {
  switch (toolId) {
    case A_TOOL_ID: return '/images/a-logo.png'
    case L_TOOL_ID: return '/images/l-logo.svg'
    case M_TOOL_ID: return '/images/m-01.svg'
    case P_TOOL_ID: return '/images/p-logo.svg'
    case R_TOOL_ID: return '/images/r-logo.svg'
    case V_TOOL_ID: return '/images/v-logo.svg'
    case G_TOOL_ID: return '/images/g-logo.png'
    case N_TOOL_ID: return '/images/n-logo.png'
    case R_TOOL_ID: return '/images/r-logo.png'
    default: return '/images/triangle-blue.svg'
  }
}

example fo how my case code looks like:

case P_TOOL_ID:
      return {
        component: <AboutP tool={tool} />,
        logoImage: '/images/p-logo.svg',
        graphicImage: '/images/a-p-logo.png'
      }

Upvotes: 0

Views: 180

Answers (1)

DrewCouturier
DrewCouturier

Reputation: 91

You can add another function that is the same as your GetToolId function but returns the alt string instead of an image.

Your component:

<Thumbnail src={getToolIcon(props.tool.id)} alt={getAltValue(props.tool.id)}   />

and your alt function:

export function getAltValue(toolId) {
  switch (toolId) {
    case A_TOOL_ID: return 'Alt string 1'
    case L_TOOL_ID: return 'Alt string 2'
    case M_TOOL_ID: return 'Alt string 3'
    default: return 'This is an image'
  }
}

Upvotes: 1

Related Questions