Skip to content
Get help on Slack

Discussion about using card parameters and custom block types in a React component.

61 replies
Last updated: May 29, 2022
hi, i dont understand why i cant use my card parameter in my react component
{cards.map((card, index) => {
        return <Card position={{ top: "top-[200px]", left: "left-0" }}>
          <PortableText
            value={data[0].card}
            components={portraitPortableTextComponents}
          />
        </Card>
      })}
May 28, 2022, 8:48 AM
Without sharing an error, an issue, your schema, more code or some additional information, there is not much we can help with… 🙂
May 28, 2022, 8:50 AM
i have no error my ide simply doesnt let me use the card argument in my function
May 28, 2022, 8:51 AM
What do you mean “doesn’t let you use”? Your IDE is not your boss, you write the code. 😹
May 28, 2022, 8:52 AM
well he kinds of know better than me what i can or cannot di
May 28, 2022, 8:52 AM
{cards.map((card, index) => {
        return <Card position={{ top: card, left: "left-0" }}>
          <PortableText
            value={data[0].card}
            components={portraitPortableTextComponents}
          />
        </Card>
      })}
May 28, 2022, 8:53 AM
Can you share a screenshot?
May 28, 2022, 8:53 AM
for the first card parameter in the CArd component i cant use my card parameter
May 28, 2022, 8:55 AM
I mean, there is nothing from what I can see that “doesn‘t let you use” that variable?
May 28, 2022, 8:55 AM
I still don’t understand what you mean with “can’t use.” It’s undefined or empty? Is it what you mean?
May 28, 2022, 8:55 AM
but not inside my portabletext
May 28, 2022, 8:55 AM
my ide doesnt show it as a parameter
May 28, 2022, 8:56 AM
Sorry?
May 28, 2022, 8:57 AM
I’m sorry, I genuinely do not understand what you mean, and the screenshot you shared doesn’t illustrate what problem you are facing with your IDE. 😞
May 28, 2022, 8:57 AM
alright
May 28, 2022, 8:59 AM
Looking at that screenshot, the 
card
and 
index
arguments are dimmed because they are not used within that closure.
May 28, 2022, 8:59 AM
i used card in the portable text
May 28, 2022, 9:00 AM
Not that I can see, no. You use a different variable: 
data[0].card
. That might not be the same as the 
card
argument.
May 28, 2022, 9:01 AM
alright i see
May 28, 2022, 9:02 AM
Right now, your code shows that:• You iterate over a 
cards
variable, which is therefore an array.• For each item in the 
cards
array, you render the exact same JSX chunk, since you use neither the 
card
argument nor the 
index
argument.• Your portable text will always be rendered with the same thing right now.
May 28, 2022, 9:02 AM
i was hoping to get a different value from the different cards i have$
May 28, 2022, 9:03 AM
I can’t really help without knowing more about your schema. What is 
cards
? What is 
data
?
May 28, 2022, 9:04 AM
i solved my problem i was going on a dead end
May 28, 2022, 2:52 PM
i opted for this
<Card _position_={{ top: "top-[350px]", left: "left-0" }}>

<PortableText

_value_={data[0].card1}

_components_={portraitPortableTextComponents}

/>

</Card>

<Card _position_={{ top: "top-[200px]", right: "-right-0" }}>

<PortableText

_value_={data[0].card2}

_components_={portraitPortableTextComponents}

/>

</Card>

<Card _position_={{ top: "top-[440px]", right: "-right-[0px]" }}>

<PortableText

_value_={data[0].card3}

_components_={portraitPortableTextComponents}

/>

</Card>
May 28, 2022, 2:53 PM
if i want to add a card ill just have to uopdate the value of the portable text
May 28, 2022, 2:54 PM
and update my schema
May 28, 2022, 2:55 PM
schema :
{

name: "card1",

title: "Texte personnalisé",

type: "array",

of: [

{

type: "block",

// Only allow these block styles
 
styles: [

{ title: "h1", value: "h1" },

{ title: "h2", value: "h2" },

{ title: "h3", value: "h3" },

{ title: "h4", value: "h4" },

{ title: "h5", value: "h5" },

{ title: "h6", value: "h6" },

],

marks: {

decorators: [

{ title: "strong", value: "strong" },

{ title: "em", value: "em" },

{ title: "strike", value: "strike" },

{ title: "underline", value: "underline" },

{ title: "blue", value: "blue" },

{ title: "green", value: "green" },

{ title: "animation", value: "animation" },

{ title: "muted", value: "muted" },

],

},

// Only allow numbered lists
 
},

],

},

{

name: "card2",

title: "Texte personnalisé",

type: "array",

of: [

{

type: "block",

// Only allow these block styles
 
styles: [

{ title: "h1", value: "h1" },

{ title: "h2", value: "h2" },

{ title: "h3", value: "h3" },

{ title: "h4", value: "h4" },

{ title: "h5", value: "h5" },

{ title: "h6", value: "h6" },

],

marks: {

decorators: [

{ title: "strong", value: "strong" },

{ title: "em", value: "em" },

{ title: "strike", value: "strike" },

{ title: "underline", value: "underline" },

{ title: "blue", value: "blue" },

{ title: "green", value: "green" },

{ title: "animation", value: "animation" },

{ title: "muted", value: "muted" },

],

},

// Only allow numbered lists
 
},

],

},

{

name: "card3",

title: "Texte personnalisé",

type: "array",

of: [

{

type: "block",

// Only allow these block styles
 
styles: [

{ title: "h1", value: "h1" },

{ title: "h2", value: "h2" },

{ title: "h3", value: "h3" },

{ title: "h4", value: "h4" },

{ title: "h5", value: "h5" },

{ title: "h6", value: "h6" },

],

marks: {

decorators: [

{ title: "strong", value: "strong" },

{ title: "em", value: "em" },

{ title: "strike", value: "strike" },

{ title: "underline", value: "underline" },

{ title: "blue", value: "blue" },

{ title: "green", value: "green" },

{ title: "animation", value: "animation" },

{ title: "muted", value: "muted" },

],

},

// Only allow numbered lists
 
},

],

},
May 28, 2022, 2:57 PM
let me know if i can make it better but im quite satisfied with it
May 28, 2022, 2:57 PM
If 
card1
, 
card2
and, 
card3
have the same block type, I don’t see why you need to duplicate them 🤔.
You can create an array of cards instead, and get the data with 
cards[index]

[EDIT] if you want to limit the number of items in your array, you can add validation rules.

  {
    title: 'Cards',
    name: 'cards',
    type: 'array',
    of: [{ type: 'block' }],
    validation: Rule => Rule.max(3) // 3 items max.
  }
May 28, 2022, 3:26 PM
if your cards need to contain more information, you can create a card object (singular) and do:
 {
    title: 'Cards',
    name: 'cards',
    type: 'array',
    of: [{ type: 'card' }]
  }

export default {
  title: 'Card',
  name: 'card',
  type: 'object',
  fields: [
    {
      title: 'Title',
      name: 'title',
      type: 'string',
    },
    {
      title: 'Content',
      name: 'content',
      type: 'cardBlock', // custom portableText
    },
    {
      // more fields...
    }
  ]
}
May 28, 2022, 3:34 PM
excuse me but i don't see the point about this line of code
{
    title: 'Cards',
    name: 'cards',
    type: 'array',
    of: [{ type: 'block' }],
    validation: Rule => Rule.max(3) // 3 items max.
  }
since in my editor i only have one rich text field
May 28, 2022, 4:16 PM
i'd like to have 3
May 28, 2022, 4:20 PM
or more
May 28, 2022, 4:20 PM
when i see 
type: 'cardBlock'
I don't understand either since i thought you could only set it to block
May 28, 2022, 4:22 PM
u mean i should replace all my cards1 cards2 cards3 with
{
    title: 'Cards',
    name: 'cards',
    type: 'array',
    of: [{ type: 'card' }]
  }

May 28, 2022, 4:24 PM
what will differentiate card 1 from card 2 from card 3 if i only have one rich text ? and get the correct index ?
May 28, 2022, 4:29 PM
An array let you create any number of 
card
you want, making it more reusable, rather than hardcoding 3 cards.
cardBlock
was an example, but if you want to reuse your 
block
, I’d suggest to create a custom block type:
export default {
  title: 'Custom PortableText Block',
  name: 'customPortableTextBlock',
  type: 'array',
  of: [
    {
      // add your configuration here
      type: 'block',
      styles: [],
      lists: [],
      marks: {
        decorators: [],
        annotations: [],
      },
    },
  ],
}
then you can reuse it elsewhere:

{
  title: 'Main Description',
  name: 'mainDescription',
  type: 'customPortableTextBlock'
},
{
  title: 'Author Description',
  name:  'authorDescription',
  type: 'customPortableTextBlock'
}

May 28, 2022, 6:14 PM
when you say i can use it elsewhere where in which document do you make reference ?
May 28, 2022, 7:08 PM
in another schema ?
May 28, 2022, 7:08 PM
alright i understood
May 28, 2022, 7:15 PM
i have one last question
May 28, 2022, 7:16 PM
is it possible to have richtext inputs only on certain documents ?
May 28, 2022, 7:16 PM
or schemas are always the same for all the documents of a certain types
May 28, 2022, 7:17 PM
anyway thank you all very much for your help im grateful
May 28, 2022, 7:18 PM
If you make your field not required, then it can be filled on some document and not on others.
May 28, 2022, 7:45 PM
good to know. But for the moment i will make a schema for each section so each field will be required
May 28, 2022, 7:52 PM
thanks for the info
May 28, 2022, 7:52 PM
I have an error when i try to add multple cards
May 28, 2022, 9:14 PM
when i click on te block component i get an error
May 28, 2022, 9:17 PM
same error when i press the add item button
May 28, 2022, 9:56 PM
_export_ default {

title: "Card",

name: "card",

type: "object",

fields: [

{

title: "Title",

name: "title",

type: "string",

},

{

title: "Content",

name: "content",

type: "block", _// custom portableText_

},

],

}
May 28, 2022, 9:58 PM
{

title: "Cards",

name: "cards",

type: "array",

of: [{ type: "card" }],

},
May 28, 2022, 9:58 PM
i(m suspicioous about this line 
type: "block", _// custom portableText_
May 28, 2022, 10:00 PM
i know how to use portabletext on the frontend but have no clue on the sanity side
May 28, 2022, 10:00 PM
You need a custom block type here. You can refer to my previous example with the customPortableTextBlock. And of course this can be named whatever you want.
May 29, 2022, 7:53 AM
man you helped me so much
May 29, 2022, 8:21 AM
sanity is way more clear for me
May 29, 2022, 8:21 AM
i'm having a blast devlopping with it
May 29, 2022, 8:22 AM
learning nextjs along with it so much to digest
May 29, 2022, 8:22 AM
😀
May 29, 2022, 8:23 AM
✅
May 29, 2022, 8:23 AM
Glad it helped 👍
May 29, 2022, 9:12 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?