In the following code, the tags are being perfectly displayed after set state but not being reflected on DOM change.
In the following code, the tags are being perfectly displayed after set state but not being reflected on DOM change.
import React from 'react';
import ReactDOM from 'react-dom/client';
import 'bootstrap/dist/css/bootstrap.css';
import PasteImage from './components/builder/q-img-paste';
import PreTag from './components/builder/q-pre-tag'
import QuestionDisplay from './components/builder/q-display';
class App extends React.Component{
state = {
questions : [],
pretag : ""
}
addImage (q){
this.setState({
questions : [q, ...this.state.questions]
})
}
updatePretag(q){
this.setState({pretag: q})
// Here, it is working perfectly
// Here, it is working perfectly
// Here, it is working perfectly
console.log(this.state.pretag)
// Here, it is working perfectly
// Here, it is working perfectly
// Here, it is working perfectly
}
render (){
return (
<React.Fragment>
<PreTag updatePretag={(p) => this.updatePretag(p)}/>
<PasteImage addImage={(q) => this.addImage(q)} preTag={this.state.preTag} />
<div className="row" id="img-display">
{
this.state.questions.map(q =>
{
// This is not shown here
// This is not shown here
// This is not shown here
// This is not shown here
console.log(this.state.pretag);
// This is not shown here
// This is not shown here
// This is not shown here
// This is not shown here
return <QuestionDisplay key={q["id"]} url={q["url"]}
id={q["id"]} tags={q["tags"]} />
})
}
</div>
</React.Fragment>
)
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);