score:0
Accepted answer
you could create a truncate function, and use it when the show more button has been clicked.
i found a truncate function from this answer.
so your code might look something like:
// create a function that only returns a certain amount of characters.
// i've just used 5 as it's what the original stack question did
const truncate = (input) =>
input.length > 5 ? `${input.substring(0, 5)}...` : input;
function app() {
// create a toggle state
const [showtruncate, setshowtruncate] = usestate(true);
let content =
"lorem ipsum dolor sit amet, consectetur adipisicing elit. atque consectetur debitis deserunt dicta dignissimos est et excepturi facere facilis fugit id in, ipsa quae reiciendis repellendus suscipit unde veniam voluptas";
// when the toggle is active, show the truncated text
// if not, show the text in full.
return (
<div classname="app">
<button onclick={() => setshowtruncate(!showtruncate)}>show more</button>
<p>{showtruncate ? truncate(content) : content}</p>
</div>
);
}
Source: stackoverflow.com
Related Query
- Hide and show number of characters in <p> - React
- How to show and hide some columns on React Table?
- how to hide and show a div in react
- how to hide and show loading spinner - Activity Indicator react native, managing props and state
- How can show and hide react components using hooks
- Force number input to have two decimal places and always show two decimals in React
- how to show and hide popup only when promise is active ? React
- React - hide and show individual element
- Hide and Show modal on mouseenter and mouseleave using React Hooks
- hide and show external components in react
- React MaterialTable editable row validation - how to show and hide error?
- React show element if input has value and hide if empty
- How to hide a column on REACT Material table in all rows and show it on Edit for the Particular Row I am editing and Add Operations on new row adding?
- I am trying to hide and show react native date picker after clicking touchable opacity
- Show and Hide specific component in React from a loop
- How to Hide and show HTML based on a cookie existing or not in a React App
- Hide and Show Looped Components in React
- How to show and hide components in React to implement a multiple steps form?
- I want to show and hide a form on toggle of a radio button in React js . Im trying how to use react hooks to hide or show a component on onChange even
- React Material UI hide table column and show onAdd
- React and Material UI: show and hide component onClick
- hide and show names using react hooks
- show and hide react JS
- Show only clicked element in array and hide the others React
- REACT JS How to show one component and hide the others on click
- How to hide and show a div in react js
- Show and Hide Condition in React
- React JS how to show password in input field for 5 seconds and then hide it?
- Hide Show component and highlight link with react scroll
- how to add code more in react to hide and show pages when I click again
More Query from same tag
- calling store from another store mobx
- Trouble figuring out how to return socket.join truthiness
- How to redirect a user to any page they try to access after authentication (conditional redirect)?
- React: Update a component's state after fetch delete
- Inline checkbox label with Formik
- Laravel + React: Handling API Data
- React-router-dom v4 does not render the component
- functional react: how to handle setState with an input from map function?
- How to retain object attributes when re-ordering with dragula?
- react-konva - Handle transformer select, deselect and hover?
- too many renders, react useInterval
- Error callback using echo-laravel and react
- How to conditionally show list items in React based on screen size
- travis cannot build because Error: Cannot find module 'react-test-renderer/shallow'
- How to refresh page after deleting?
- How can I stop the execution of my promise based on the boolean value of my prop?
- Request made with axios does not work but if it works with XMLHttpRequest
- How to re-render a custom hook
- How to fix updating the same info twice in redux?
- "TypeError: this.setState(...) is undefined" when making a promise after setting state
- Using react-redux-firebase to comsume cloud functions - React JS
- JS: shorten search results by the words, which were found
- "SyntaxError: Invalid or unexpected token" - How to SSR images/css with react
- How to merge multiple functions into one function
- Cannot read property 'push' of undefined React
- Downloading Large Number of Files in Frontend using jszip
- Event Listener Callback Fires Immediately When Set Inside The Callback of Another Event Listener. ReactJS
- How to test a React component having async functions with jest & enzyme
- Converting React function component to class component issue
- Call Method on createClass result Should be simple