Hellllp

[short coral]

import React from "react"
import {useState} from "react";
import { languages } from "./languages"

/**

• Goal: Build out the main parts of our app
• Challenge:
• 1. Save a "currentWord" in state. Initialize as "react".
• 2. Map over the letters of the word (you'll need to turn
• the string into an array of letters first) and display
• each one as a <span>. Capitalize the letters when
• displaying them.
• 3. Style to look like the design. You can get the underline
• effect on the box using border-bottom.
  */

export default function App() {
const [currentWord, setCurrentWord] = useState("react")

const languagesEle = languages.map(lang => {
const styles = {
backgroundColor: lang.backgroundColor,
color: lang.color,
};

const letterElements = currentWord.split("").map(letter => (
<span>{letter}</span>
))
console.log(letterElements)

return (
<span
key={lang.name}
style={styles}
className=" cursor-pointer px-3 py-1.5 text-xs font-semibold rounded-full whitespace-nowrap transition hover:brightness-110"
>
{lang.name}
</span>
);
});

return <main className="flex flex-col items-center " >
<header>
<h1 className=" text-center text-[#F9F4DA] text-lg ">Assembly Endgame</h1>
<p className=" text-center text-sm text-[#8E8E8E] max-w-[350px]">Guess the word in under 8 attempts to keep the programming world safe from Assembly!</p>
</header>
<section className="text-center border-s-[#10A95B] bg-[#10A95B] rounded-sm text-xl text-center text-[#F9F4DA] mt-5 w-[352px] h-14 ">you win! <br /> well done🎉</section>
<section className="flex flex-wrap justify-center gap-2 pt-8 mt-6 max-w-md mx-auto">
{languagesEle}
</section>

<section>
{letterElements}
</section>

</main>

}
what is wrong here guys i cant seem to find anything wrong and ai is not explaining anything btw the video on scimba was the same code and it worked for him

[proud trellis]

First:

Problem is scope. You created a map function languagesEle. In that map function you created another map function letterElements. Because letterElemenst is in the scope of languagesEle, you dont have access outside of languagesEle. Anyway, sice you dont need letterElements in languageEle, move letterElements outside.

// example
const letterElements = currentWord.split("").map(letter => <span key={letter}>{letter}</span>

const languagesEle = languages.map(({ backgroundColor, color, name }) => {
return (
<span
key={name}
style={{ backgroundColor, color }}
className=" cursor-pointer px-3 py-1.5 text-xs font-semibold rounded-full whitespace-nowrap transition hover:brightness-110"
>
{name}
</span>
);
});

Second:
Span need a key
 <span key={letter}>{letter}</span>

Third:
You dont have to import React if you import useState, or at least import it at the same line

import React, { useState } from 'react'

Fourth:
You can improove your tailwind, Your first section tag is using two times 'text-center'.
max-w-[350px] = max-w-87.5
max-w-[352px] = max-w-88

This should work:

import { useState } from "react";