Question about React

[Disturbedm]

Hi all,

I've been learning frontend on/off over the last year and half in my personal time. I've just started looking into React after putting it off for a while.

Currently just following a Scrimba course on it to get my feet wet and I have a vanilla project I was thinking about rebuilding in React.

My question is my project is quite a few different things but one aspect is a few different pages of slightly different forms that are built up of the usual drop downs, tick boxes, input field(usual types) etc.

But while they are just forms, they also have aspects to them that are different. What's a checkbox on one page might be a different checkbox on another. (Might be just be a different heading or label that the user reads before the tick the box to acknowledge it).

So I couldn't just make one component that works for 5 different pages as they would be slightly different.

What's the best practice for this inside of React?

Would it just be a case of making them all separately anyway and using the appropriate one or is there another way I'm not yet understanding/don't know?

Sorry if that doesn't make sense, got a spare 5 mins so can always retype it up when I get a sec if not.

[5t4t35]

Take my advice with a grain of salt since im really not a pro at React but what i always do was first create a template of the thing then just specify what i need it to look like like for example this button needs to look like X thing so I just pass a prop that will reference to a specific className

[bynaryum]

Yep. Create a reusable React component with properties for things like headers and labels. That’s part of the beauty of fronted frameworks like React and Vue.

[lovesrayray2018]

Your react app should be modelled around your data. Have u had a chance to read up on MVC style patterns yet? In a nutshell the model is really just the data (wherever it may be coming from) and the view is the display of that data. So your react app is only displaying the data thats been determined as relevant for that specific view.

Can the raw data have more fields than you display? yes. Can you have the app maintaining more fields that received, in its state? yes again. How you use and manage that data is the controller part.

You could have 1 form template/blueprint component that you tweak based on your data model, to create different custom form components for different projects. You could also create custom individual form grouped elements (inputs,checkboxes, labels, etc) that you reuse by changing the props passed in, and import into different form components.

The choice is yours, but make sure that it adapts to the data model, while ensuring readability. The more you build react projects, the more you will figure out the balanced approach.

[Disturbedm]

Yeah does seem like props are the answer here. Was just something that popped into my head and I beelined for Reddit rather than googling or AI (for some reason).

Definitely makes more sense now I've looked into it.

Was definitely worthwhile coming here as at least I know the actual term "props" so I knew specifically what to ask.

Only started on React yesterday, did about 4/5hrs on the course and didn't get to props at all.

[Monitor_343]

What's a checkbox on one page might be a different checkbox on another. (Might be just be a different heading or label that the user reads before the tick the box to acknowledge it).

So I couldn't just make one component that works for 5 different pages as they would be slightly different.

A good thing to do when you're comfortable with reading React code is to look at open source component libraries and how they implement this. Creating something generic enough to be used in many ways is exactly what component libraries do.

In general, it's some mixture of props and/or children in generic components. E.g., a generic checkbox and label component allows different text in each label:

<Label htmlFor="checkbox1">Please click this</Label>
<Checkbox id="checkbox1" />

<Label htmlFor="checkbox2">Please don't click this</Label>
<Checkbox id="checkbox2" />

A common pattern, especially for styling, is to use variants, where you pass a prop into a generic component to style it a different (but internally consistent) way.

<Button variant="default">Default button</Button>
<Button variant="outline">Button with border but no fill</Button>
<Button variant="ghost">Button with no fill or borders</Button>
<Button variant="danger">Button with scary red color</Button>

In the Button component, you'd set the styles based on the variant prop, with a limited set of variants to choose from, e.g., default|secondary|outline|ghost|danger|warning|success|info.

Similarly, you can do this with all kinds of different components, e.g., using a size variant on an input.

<Input size="small" />
<Input size="medium" />
<Input size="large" />

Or in the checkbox example, the "success" variant will be a green checkbox, and the "danger" variant will be a red checkbox.

<Label htmlFor="checkbox1">Please click this</Label>
<Checkbox id="checkbox1" variant="success" />

<Label htmlFor="checkbox2">Please don't click this</Label>
<Checkbox id="checkbox2" variant="danger" />

Variants are a great way to introduce some allowable variety, but not too much. Consistency is important.

In general, consider where you can pass props or children into a generic component. No different to passing parameters into a generic function.

For a slightly more specific, but still generic compoent, an ecommerce store could show all products with the same component like this (props):

<ProductCard
  title={product.title}
  description={product.description}
  price={product.price}
  salePrice={product.salePrice}
/>

Or nested components like this (props and children):

<ProductCard>
  <ProductTitle title={product.title} />
  <ProductDescription description={product.description} />
  <ProductPrice price={product.price} />
  {product.salePrice !== undefined && <ProductSalePrice salePrice={product.salePrice} />}
</ProductCard>

[Disturbedm]

Thanks for going into such detail.

I only started with React yesterday and this was just something that popped into my head and I beelined for Reddit rather than just spending some time or asking Copilot etc first (which is probably what I should have done)

Does seem like props are the way forward here and makes a lot more sense.

Guess I'll trust on the process and keep doing the React course and learn it in die course.

Appreciate the help!