Turn repeated markup into one reusable component with props

I keep pasting the same block of markup with only the text changed, and every edit means fixing it in five places.

BeginnerRead 4 minDoing: under an hour6 steps

What you'll have at the end

A single typed component driving all five dashboard cards, with the one card that needs extra content nesting it inside instead of pasting new markup.

Before you start

You need

A React component file where the same block of JSX is pasted more than once, changing only a handful of details like a label, a number, or an icon.

Not covered

Publishing the new component as a package other projects import, or wiring its values to a live data source instead of the props you pass in by hand.

Leans on

See what actually varies

Line up every copy and mark what changes
Turn each real difference into a plain prop

Build it once and type it

Build the component from one working copy
Give the props a TypeScript interface

Swap it in and know when to stop

Swap each pasted copy for one call
Stop before one more prop makes it worse

Where to go next

Pull duplicated logic out of two components into your own custom hook

For behavior that repeats across components rather than markup, since a hook shares the logic directly instead of the shape wrapped around it.

Checked 22 Aug 2026

Part of the React Frontend Framework cookbook