ReactJS Toggling Props Length - reactjs

Question

I have a show/hide functionality that I am building out for a component and I am wondering how I can toggle the length of a string from 5 characters to its full length and back based on a button click and the previous state. I have the button click and a boolean indicating a true/false state, but I am not sure how I can switch between the 5 character limit and full length. I can only get the expanded text and not the original state.
Based on a state boolean (showFullText) I thought of this solution:
if (this.state.showFullText == false){
partialText = this.props.discovery.slice(0, this.state.characterLimit);
} else {
partialText = this.props.discovery;
}
but it is not working within the context of this code. No error message.
import React from 'react';
//Annotation Card - Body
export default class Body extends React.Component {
constructor(props){
super(props);
this.state = { showFullText: false, characterLimit: 10 };
this.showHideFullText = this.showHideFullText.bind(this);
}
showHideFullText(){
console.log(this.state.showFullText);
this.setState({
showFullText: !this.state.showFullText,
characterLimit: this.props.discovery.length,
expandButtonText: "Show Less"
});
}
render() {
var partialText;
if (this.state.showFullText == false){
partialText = this.props.discovery.slice(0, this.state.characterLimit);
} else {
partialText = this.props.discovery;
}
var textExpandButton;
if(this.props.discovery.length >= this.state.characterLimit) {
textExpandButton = <TextExpandButton showHide={this.showHideFullText} showFullText={this.state.showFullText} />;
} else {
return this.props.discovery;
}
return (
<div>
<p>{partialText}</p>
{textExpandButton}
</div>
)
}
}
//Annotation Card - Body - Text Expand Link
export const TextExpandButton = props => {
var buttonText;
if(props.showFullText === true){
buttonText = "Show Less";
} else {
buttonText = "Show More...";
}
return <a href="#" onClick={props.showHide}>{buttonText}</a>
}

Answer 1

The approach to use a toggled boolean in state is a great one because of its simplicity.
In Body.showHideFullText, characterLimit is being set to the length of discovery and this.props.discovery.slice(0, this.state.characterLimit) really is this.props.discovery.slice(0, discovery.length).
characterLimit should possibly be a write once value (set to 5 as the initial state of Body component). I'll suggest making this a property of Body and setting its default value to 5. There is no reason to keep it in state with your present requirements for the component.
In Body.showHideFullText, only toggle the boolean value for showFullText
showHideFullText(){
this.setState(
prevState => ({
...prevState,
showFullText: !prevState.showFullText,
})
);
}
I don't find it necessary to store expandButtonText in the component state because its value can be decided from the value for showFullText.
Update: Code for affected components (Run on StackBlitz)
Body.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import TextExpandButton from './TextExpandButton';
class Body extends Component {
constructor(props) {
super(props);
this.state = { showFullText: false };
this.toggleFullTextDisplay = this.toggleFullTextDisplay.bind(this);
}
toggleFullTextDisplay() {
this.setState(prevState => ({
...prevState,
showFullText: !prevState.showFullText,
}));
}
render() {
const { discovery, characterLimit } = this.props;
const { showFullText } = this.state;
return (
<div>
<p>{showFullText ? discovery : discovery.slice(0, characterLimit)}</p>
{discovery.length >= characterLimit && <TextExpandButton showFullText={showFullText} toggleFullTextDisplay={this.toggleFullTextDisplay} />}
</div>
)
}
}
Body.defaultProps = {
characterLimit: 5
};
Body.propTypes = {
characterLimit: PropTypes.number,
discovery: PropTypes.string.isRequired,
};
export default Body;
TextExpandButton.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
const TextExpandButton = props => {
const { showFullText, toggleFullTextDisplay } = props;
const buttonText = showFullText ? "Show Less" : "Show More...";
return (
<a href="#"
onClick={props.toggleFullTextDisplay}
>
{buttonText}
</a>
);
}
TextExpandButton.propTypes = {
showFullText: PropTypes.bool.isRequired,
toggleFullTextDisplay: PropTypes.func.isRequired,
};
export default TextExpandButton;