Question 191923 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Text in view from function parameter

I want to show the text I pass into the parameter.

export default function Paragraph(text) {
   return(
      <div>
         {text}
      </div>
   )
}

But so far it doesn’t render the text. I have even tried calling it as such

<Paragraph text="Some text"></Paragraph>
Tags:

2

Answers


  1. 0

    The Paragraph component should receive a "props" object argument, and the value of the "text" key should be obtained by destructuring the props object.

    export default function Paragraph({ text }) {
   return(
      <div>
         {text}
      </div>
   )
}
    Login or Signup to reply.
  2. 0

    Components receive an object called props as sole argument and we use it to access all the properties passed to the component.

    Solid need function calls to preserve reactivity. Since props object uses a getter internally, reactivity is preserved. However when you destructure the props object, you will be opting out of reactivity.

    So, here is how you define the said component with types and all:

    import { Component } from 'solid-js';

const Paragraph: Component<{ text: string }> = (props) => {
  return <div>{props.text}</div>
}

    If you don’t use typescript:

    const Paragraph = (props) => {
  return <div>{props.text}</div>
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search