state update not being reflected on mapped elements

September 5, 2022

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>
);

>Solution :

You have a state that contains an array and a string. you are maping the array questions in JSX so it will only reflect changes in question state and it will not render or reflect any change in question string. you are accessing question by this.state.question.map

and there is no state preTag you are not maping it.