使用 jsx 动态替换元素

Question

I'm having an array data.info that is being updated over time and I'm trying to replace placeholder rendered elements with another. So by default app.js looks like this

return (
    <Fragment>
        {data.info.map((index) => {
            return <Typography key={index} variant="h6" className={classes.title}>Demo</Typography>
                })}
    </Fragment>
)

Also I have a hook with async function to subscribed to data.info.length .

useEffect(
    () => {
        if (!initialRender.current) {
            if (data.info.length!==0) {
            for (let i = data.info.length-iScrollAmount+1 ; i < data.info.length+1; i++) {
                firstAsync(i)
            }
        }

        } else {
            initialRender.current = false
        }
    },
    [data.info.length]
)

async function firstAsync(id) {
    let promise = new Promise(() => {
            setTimeout(() => console.log(document.getElementById(id)), 500)
    });
    }

With document.getElementById() and id I can get to every element that was rendered and change it. And here goes the problems.

1. I'm using material-ui so I can't get to <Typography/> because it is transformed into <h6/> . Probably that is not a problem since I need to replace contents, so I can find parent element and remove all children. Is that way correct?

2. After I delete children how do I add content using jsx ? What I mean is that in async function I'll get an array that I want to use in new element <NewCard/> to dynamically put into <Fragment/> . Yet I did not find any example how to do that.

Answer 1

It is not a good practice to change DOM Nodes directly in React, and you need to let React do the rendering for you and you just tell react what to do.

in your case you need to define a React State for your data and set your state inside your firstAsync function and then use your state to render whatever html element or React component which you want

Answer 2

React does not encourage the practice of manipulating the HTML DOM nodes directly.

Basically you need to see 2 things.

1. State which is a special variable whose value is retained on subsequent refresh. Change in reference in this variable will trigger component and its children a refresh/re-render.
2. Props which is passed to every Component and is read only. Changing in props causes refresh of component by default.

In your example, based on data.info you want to render Typography component.

Solution

1. First thing is your map function is incorrect. First parameter of map function is item of list and second is index. If you are not sure if info will always be present in data , you may want to have a null check as well.

{(data.info || []).map((info, index) => { return <Typography key={index} variant="h6" className={classes.title}>{info.text}</Typography> })}

2. You should be passing info from map to Typography component. Or use info value in content of Typography as shown above.
3. Update data.info and Typography will update automatically. For this, please make sure, data.info is a component state and not a plain variable. Something like

const [data, setData] = React.useState({});

And when you have value of data (assuming from API), then

setData(responseApi);