What's the proper way to modularize Polaris component?

Solved
daniel211
Shopify Partner
1 0 0

Hi everyone,

I'm just working on my first app and am trying to clean it up a little bit. I'm still a beginner with serverside development and have just learned React recently in order to use Polaris.

One of the pages in my app is rather long and I would like to break it down into different components. If I do this, the text does render, but I don't have access to the constants anymore and was wondering what the correct way is to make them accessible.

Let's say I have this inside my page.js:

<Card.Section>
	<TextField
		label="Title Text"
		onChange={titleTextChange}
		value={titleText}
	/>
	<Stack>
		<Stack.Item>
			<Checkbox
				label="Make Text Bold"										
				onChange={setBoldText}
				checked={boldText}
			/>
		</Stack.Item>
		<Stack.Item>
			<Checkbox
				label="Make Text Italic"
				onChange={setItalicText}
				checked={italicText}
			/>
		</Stack.Item>
	</Stack>
</Card.Section>

I now take this and, along with the associated constants, put it into a file I call TextSection.js:

import React, { useState } from 'react';
import { Card, Checkbox, Stack, TextField } from '@shopify/polaris';

function TextSection() {
	const [
		titleText,
		setTitleTextText,
		boldText,
		setBoldText,
		italicText,
		setItalicText
	] = useState('');

	const handleTextChange 			= (newTitleText) 		=> setTitleText(newTitleText);
  const handleBoldText				= (newBoldText)					=> setBoldText(newBoldText);
  const handleItalicText			= (newItalicText)				=> setItalicText(newItalicText);

  return (
		<Card.Section>
			<TextField
				label="Title Text"
				onChange={titleTextChange}
				value={titleText}
			/>
			<Stack>
				<Stack.Item>
					<Checkbox
						label="Make Text Bold"										
						onChange={setBoldText}
						checked={boldText}
					/>
				</Stack.Item>
				<Stack.Item>
					<Checkbox
						label="Make Text Italic"
						onChange={setItalicText}
						checked={italicText}
					/>
				</Stack.Item>
			</Stack>
		</Card.Section>
  )
}


export default TextSection;

Now if I import this to my original file, I can use <TextSection /> and render all of this as expected and my code is a lot cleaner, but I can't access titleText and the other constants anymore.

I know this is a very basic question, but I've been trying to solve it of a while and wasn't able to find a solution myself.

Thanks for your help!

0 Likes
olivert
Explorer
51 11 14

This is an accepted solution.

Hey hey

There are some common things we do in react to pass variables between components.

So in this case your main page is the parent and your text field is the child.

We pass States to child components by passing the component 'props'. these props can be accesed within the child component in the props object. 

Then if you want the child component to update a state in the parent. You need to pass a function down as a prop to the child.

eg. pass your setState() down as a prop.

Then call it in your child and youll set the state of your parent.

Take a peek at some react guides on setting states and passing states to components.

Keep your components short and sweet and you'll thank yourself a million times when you dive back in your code next year. XD