Passing a JSON string as props into a react component

Question

This seems to me like a very standard use case, maybe so much so that no one have even considered having to explain it :) But turns out I don't understand how to achieve it, so please help :)

I need to pass a set of data into a react component, the data is optional, and if there isn't any provided, the component will assume its a new entry.

My problem is that I can get it to work if I assign each variable manually, but now I want to pass the JSON straight as props, saves me having to write a lot of title=data.title, content_id=data.content_id

This is the class (so far)

export interface categoriesEntity {
    'category_id'?: string;
    'category_public'?: boolean | null;
    'description'?: string | null;
    'icon_uri'?: string | null;
    'title'?: string | null;
}

interface withContCategoryEntity extends categoriesEntity {
    newEntity: boolean
}

export class CategoryForm extends React.Component <any, withContCategoryEntity> {
    constructor(props: categoriesEntity) {
        super(props);
        if (props.category_id && (props.category_id ?? false)) {
            this.state = {
                title: props.title,
                category_id: props.category_id,
                icon_uri: props.icon_uri,
                category_public: props.category_public,
                description: props.description,
                newEntity: false
            }
        } else {
            this.state = {
                newEntity: true,
            }
        }

    }
    render() {
        console.log(this.state);

        return <h1>Hello, {this.state.title}</h1>;
    }
}

And if I call it with the line:

           <CategoryForm title={'Test'} category_id={'1'}/>

It works, however, I want to be able to just provide it with JSON, or even better, just a variable with the JSON, something like:

            <CategoryForm {{title: "test", category_id= "123" }}/>

Any help greatly appreciated.

Oleg Brazhnichenko · Accepted Answer · 2022-07-26 11:14:27Z

4

You can just spread your props like this:

<CategoryForm {...categoryFormData} />

It would not work with a JSON itself, because JSON is a string, but it surely should work with objects

For example if you have object

const testData = {
   prop1: "something",
   someMethod: () => console.log("do something")
}

and you will use it like

<CategoryForm {...testData} />

it will be same as

<CategoryForm prop1="something" someMethod={() => console.log("do something")} />

answered Jul 26, 2022 at 11:14

Oleg Brazhnichenko

6524 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

vrghost Over a year ago

To both of you, thank you so very much, had to give the flag to the one that answered first (seemed only right)

Shadi Amr · Accepted Answer · 2022-07-26 11:18:38Z

2

Let's imagine you have this set of data :

const data = {
  firstName: "John",
  lastName: "Doe",
  .......
};

Then you can send it like this :

<CategoryForm {...data} />

And receive it as props :

function CategoryForm({ firstName, lastName }) {...}

Or Class based component :

constructor(props: categoriesEntity) { ... }
console.log(props.firstName);

answered Jul 26, 2022 at 11:18

Shadi Amr

5103 silver badges9 bronze badges

Collectives™ on Stack Overflow

Passing a JSON string as props into a react component

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related