Как сделать что-то только для первого элемента в aray

Question

В настоящее время я ищу способ обозначить первый элемент из массива. Давайте просто скажем, добавить разные className только для первого node, как пример ниже

export const ListQuery = graphql `
  query{
     list: allMarkdownRemark {
          edges {
               node {
                   id
               }
          }
     }          
  }

`
const Foo = (props) => {
   return (
      <>
         {props.data.list.edges.map((edge) => {
             <div clasName={edge.node[0]  ? `foo` : `bar`}>
                {edge.node.id} 
             </div>
         })}
      </>
   )
}
export default Foo;

Я уже пробовал троичный {edge.node[0] ? 'foo' : 'bar'}, но, к сожалению, похоже, не работает

Answer 1

Попробуйте это:

const Foo = (props) => {
   return (
      <>
         {props.data.list.edges.map((edge, i) => {
             <div className={i === 0  ? `foo` : `bar`}>
                {edge.node.id} 
             </div>  
         })}
      </>
   )
}