I'm trying to make a simple component in order to integrate a readmore function into it to reuse it in my application, but I'm having a problem that I don't understand. After several searches, I wonder if this is not a subtlety of NextJS? Anybody have an idea? Thanks
import React, { useState } from 'react';
const ReadMore = ({ limit, children }) => {
const text = children;
const [isReadMore, setReadMore] = useState(false);
const toggleBtn = () => {
setReadMore((prevState) => !prevState);
};
return (
<div>
{isReadMore ? text : text.substr(0, limit)}
<button onClick={toggleBtn}>
{isReadMore ? 'Réduire' : '... en savoir +'}
</button>
</div>
);
};
export default ReadMore;
using readmore in a component
<ReadMore limit={200}>
<p>
Lorem ipsum dolor sit amet, consectetur lorem,
sed do eiusmod tempor incididunt ut lab lorem.
Ut enim ad minim veniam,Lorem ipsum dolor, sit
amet consectetur adipisicing elit. Nobis
consectetur molestias provident perferendis
voluptates veniam accusantium, quibusdam quod,
dignissimos iusto, eum error itaque ab harum.
Illum sequi neque consequuntur fugit Lorem,
ipsum dolor sit amet consectetur adipisicing
elit. Distinctio consectetur sit dolores, beatae
error ipsum eos est quidem, soluta nobis,
perferendis voluptatum? Dolor similique minus
assumenda doloremque corrupti aliquam nulla.
</p>
</ReadMore>````
I would suggest adding text as a prop and not using children since children is not a string (as Akshit pointed out).
import React, { useState } from 'react';
const ReadMore = ({ limit, text }) => {
const [isReadMore, setReadMore] = useState(false);
const toggleBtn = () => {
setReadMore((prevState) => !prevState);
};
return (
<div>
<p>
{isReadMore ? text : text.substr(0, limit)}
</p>
<button onClick={toggleBtn}>
{isReadMore ? 'Réduire' : '... en savoir +'}
</button>
</div>
);
};
export default ReadMore;
// <ReadMore limit={200} text={text}>