在 JSX 中访问 Map Function 之外的值

Question

Newbie question here. I'm not sure how can access slide.title value outside map function scope in JSX and place somewhere else.

{
  bases.map((slide, index) => {
    return (
      <div className={index === base ? "slide active" : "slide"} key={index}>
        {index === base && (
          <img alt={slide.title} className="skin" src={slide.url} />
        )}
        {index === base && <p>{slide.title}</p>}
      </div>
    );
  });
}

Lets say I want this actual slide.title use in paragraph tag outside this function.

<p>{slide.title}</p>

I suppose I can store in state and reuse it, but really I don't know how.

Thanks in advance

Answer 1

Just use bracket notation to look up the base index in the array to get the title there:

<p>{bases[base]?.title}</p>

Answer 2

I think a state would be your best bet.

I like to use a reducer because it allows for multiple states.

import {useReducer} from 'react';
const initialState = {
title = ""
}
const reducer = (state, newState) => ({...state, ...newState});
const [state, setState] = useReducer(reducer, initialState);

//then when you do have access to the slide.title just 
setState({title: slide.title});

This would let you add multiple state items, just by adding them into the initial state const at the top.