Компонент ItemNews на хуках

import { useState } from "react";
import React from "react";
 
function App() {
  const [readMore, setReadMore] = useState(false);
  const image = <img src={"http:placekitten.com/300/"} alt={"kitten"}></img>;
  const extraContent = (
    <div>
      <p className="extra-content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui,
        consectetur neque ab porro quasi culpa nulla rerum quis minus
        voluptatibus sed hic ad quo sint, libero commodi officia aliquam!
        Maxime.
      </p>
    </div>
  );
  const buttonName = readMore ? "Read Less << " : "Read More >> ";
  return (
    <div className="App">
      <image>{image}</image>
      <button
        onClick={() => {
          setReadMore(!readMore);
        }}
      >
        <h2>{buttonName}</h2>
      </button>
      {readMore && extraContent}
    </div>
  );
}
 
export default App;

import { useState } from 'react';
import React from 'react';
 
const ItemNews = ({ text, maxLenght, imgSrc }) => {
  const [readMore, setReadMore] = useState(false);
  const image = <img src={imgSrc} alt={'kitten'}></img>;
  const handleReadMore = () => setReadMore(!readMore);
 
  if (maxLenght >= text.length) {
    return (
      <div>
        <image>{image}</image>
        <div>{text}</div>
      </div>
    );
  }
 
  const content = readMore ? text : text.substr(0, maxLenght) + '...';
  const buttonName = readMore ? 'Read Less << ' : 'Read More >> ';
 
  return (
    <div>
      <image>{image}</image>
      <div>{content}</div>
      <button onClick={handleReadMore}>
        <h2>{buttonName}</h2>
      </button>
    </div>
  );
};
 
function App() {
  const text = `Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui,
  consectetur neque ab porro quasi culpa nulla rerum quis minus
  voluptatibus sed hic ad quo sint, libero commodi officia aliquam!
  Maxime.`;
  const imgSrc = 'http:placekitten.com/300/';
 
  return <ItemNews imgSrc={imgSrc} text={text} maxLenght={50} />;
}
 
export default App;