Memorization App — second component

I think the next component is a passage — all of the word components together.

export default function Passage({ words }) {
    return (

        words.map((item, index) => (
            <Word key={index} word={item.word} clozed={item.clozed} />
        ))
        
    );
}

And here’s the updated invocation from the Home() function:

export default function Home() {
  var pass = [
    { word: "This " },
    { word: "word ", clozed: "true" },
    { word: "is " },
    { word: "clozed."}
  ]

  return (
    <div style={{textAlign:"center", marginTop:"200px"}}>
      <Passage words={pass} />
    </div>
    )
  }

I was glancing at the console and noticed this error: ‘Each child in a list should have a unique “key” prop.’

Get David Buchs’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

A quick search (https://codedamn.com/news/reactjs/each-child-in-a-list-should-have-a-unique-key-prop-how-to-fix-react-error) reminded me that React won’t be able to update the state for individual children unless they have unique keys. I was already iterating index in the map() function, but I wasn’t doing anything with it, so that was an easy fix.

I think that I won’t want to have separate components for Clozed and Unclozed words. Instead, I want to use state to change a Word from clozed to unclozed.

'use client'

import React, { useState } from 'react';

export function Word({ word, clozed }) {
    const [myWord, setMyWord] = useState(clozed ? "_".repeat(word.length) : word);
    const [Clozed, setClozed] = useState(clozed);

    const handleMouseLeave = () => {
        if (Clozed) {
            setMyWord('_'.repeat(myWord.length));
        }
    };

    return (<h1
        onMouseEnter={() => setMyWord(word)}
        onMouseLeave={handleMouseLeave}> {myWord} </h1 >);
}

I remember now that there’s a key difference between class components and functional components. I’ll need to dig into that a bit more to make sense of how this is working.