JavaScript
0
Вклад в тег
import React, { useEffect, useState } from "react";
import { NavLink } from "react-bootstrap";
import styles from "./Ability.module.css";
const Ability = ({ ability }) => {
console.log(ability);
const [state, setstate] = useState({});
useEffect(() => {
console.log("RENDERED");
if (Array.isArray(ability)) {
console.log("выполняется поиск");
const neededText = ability.find((el, index) => {
return el.language.name === "en";
});
setstate({ neededText });
}
}, [ability]);
console.log(state);
// остановился на том что приходят две языковых версии текста абилок... надо придумать как будет отображаться именно английская..
return (
<div>
<div className="container">
<div className="row">
{state.neededText && (
<div className="col-lg-12">
<p>{state.neededText.effect}</p>
<p>{state.neededText.short_effect}</p>{" "}
</div>
)}
<div className="col-lg-12">
<NavLink to="/pokemon">Вернуться назад</NavLink>
</div>
</div>
</div>
</div>
);
};
export default Ability;