Question 100571 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – how can i display the first 100 characters of a blog post which is written using rich text editor

i am making a blog where the blog content is written using rich text editor before using rich text editor i used substring to display first 100 characters but now since rich text from my api is coming as an array i cant show the initial lines of post.
i am using sanity for cms

import React, { useEffect, useState } from 'react'

import { Link } from "react-router-dom"

import { client } from '../../client'

import PortableText from "react-portable-text"

import BlockContent from "@sanity/block-content-to-react"

const Blog = () => {

    const [blogs, setBlogs] = useState([])

    useEffect(() => {

        const query = '*[_type == "blog"] | order(publishedAt desc)'

        

        client.fetch(query)

        .then((data) => {

            console.log('before',data[0])

            setBlogs(data);

        })

    }, [])

    

 return (

    <div>

          <div style={{marginTop: "3rem"}} className='center top-name'>

            BLOGS

          </div>

        <div class="blog_post">

            

            {blogs.map((blog, index) => (

                

                <div key={index} class="container_copy2">                        

                <Link

                    style={{textDecoration: "none"}}

                    to={`/blog/${blog.slug.current}`}>

                        <div>

                            <h1 class="blog-title">{blog.title}</h1>

                            <p class="blog-content">

                                

                                <BlockContent

                                blocks={blog.content}

                                projectId= {process.env.REACT_APP_SANITY_PROJECT_ID}

                                dataset="production"

                                />



 </p>

                        </div>

                        

                </Link>

                <hr style={{color: "white", width: "500px", opacity: "0.2", marginTop: "2rem", marginBottom: "0px"}} />

                    </div>

            ))}

            

        </div>

    </div>

  )

enter image description here

i tried using substring again but since its an array it wont work

Tags:

2

Answers


  1. 0

    using the serializers prop to customize the rendering of the block type then wrapping the text content of the block in a p tag with a class of blog-content and using substring(0, 100) to display only the first 100 characters of the block’s text content.

    <BlockContent
  blocks={blog.content.slice(0, 1)}
  projectId={process.env.REACT_APP_SANITY_PROJECT_ID}
  dataset="production"
  serializers={{
    types: {
      span: ({ children }) => (
      <span>{children[0].text.substring(0, 100)}...</span>
      ),
    },
  }}
/>
    Login or Signup to reply.
  2. 0

    If you want to do this on the client side, then another option is CSS line-clamp. This way, you won’t need to compute the character count and the browser will do it automatically for you.

    p {
  width: 250px;

  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam finibus sem a pellentesque feugiat. Nunc lobortis enim erat, quis molestie nunc ultrices a. Vestibulum scelerisque vulputate faucibus. Sed maximus ex a purus suscipit, at finibus urna mollis. Pellentesque commodo maximus consectetur. Sed bibendum vulputate fringilla. Praesent bibendum, nisl a pulvinar efficitur, metus nisl consectetur ligula, ac bibendum augue velit ac libero. Quisque et vehicula velit. Vestibulum porta massa vel tellus semper sodales. Curabitur aliquet maximus cursus. Curabitur et ullamcorper velit.
</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search