Dynamically creating react component from fetched data

Question

I am trying to build a fill-in-the-blank style component. It consists of some text with one or more input boxes inside the text. The number and location of the input boxes varies from text to text so the component must be dynamically built. My question is: what is the best way to store this on a database and fetch it for rendering?

My attempt at a solution:

Create a component which has the text and input boxes appropriately placed
Store the entire component JSX in the database and fetch it when requested
Render the fetched JSX in a container component

I think this would work but I'm wondering if there is a better way since it seems a bit hacky to store the entire component JSX on a database.

you able to do it?

Rishabh Singh
– Rishabh Singh

2024-07-22 19:30:04 +00:00
Commented Jul 22, 2024 at 19:30 — Rishabh Singh
– Rishabh Singh, Commented Jul 22, 2024 at 19:30

SlothOverlord · Accepted Answer · 2021-11-05 09:45:38Z

2

Do not store the entire element inside the database. You just need to store the relevant data that will go inside the input object:

For example:

initialValue, value, type, placeholder, label, isTextArea, ...etc

Then when you fetch data:

const [inputData, setInputData] = useState(iunitialInputData)

useEffect(() => {
//Fetch input data from DB
data = apiCall()
setInputData(data)
})

return (
//render inputs here

{ inputData?.length? inputData.map(item => {

//Put data inside here
return(
<input value={item.value} placeholder={item.placeholder} />
)
}) : <p>No data!</p>
}
)

answered Nov 5, 2021 at 9:45

SlothOverlord

2,0451 gold badge9 silver badges22 bronze badges

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

Collectives™ on Stack Overflow

Dynamically creating react component from fetched data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related