React state value became null when it pass to model

user_12854030 0
Viewed 72

I have AboutMeText state and it successfully updated by props, I successfully display its value <h6>{this.state.AboutMeText}</h6> but when I try to pass this state value into model its value became null. I already tried {this.state.AboutMeText} or {this.props.AboutMeText} but not work

Please help me sir i am new in react js 

 <DIV className="template-profile">
   <Image
     url={this.state.selectedImages.profilePicture}
     mode={"Profile"}
   />
   <h6>Hello I'm</h6>
   <h1 className="template-profile-name">
     Nabnit Jha
   </h1>
   <h6>
     {this.state.AboutMeText} // here state value display successfully
   </h6>
   <DIV className="template-self-info">
     <Modals modalBody={this.state.AboutMeText} modalHeading="About Me"></Modals> // here state value became null
   </DIV>
 </DIV>
reactjs javascript
2 Answers

if I correctly understand your problem. You need set default state for avoid null data

if you use class component in constructor of class you should set default value of state

class SomeComponent extends React.Component {
   constructor(props) {
    super(props);
    this.state = {
         someData: []
    };
   }
}

if you use functional component you should use react hooks

const SomeComponent = () => {
   const [items, setItems] = useState([]); // default value empty array
};
user_129807150

Open your model based on condition like - 

               <DIV className="template-profile">
                    <Image
                        url={this.state.selectedImages.profilePicture}
                        mode={"Profile"}
                    />
                    <h6>Hello I'm</h6>
                    <h1 className="template-profile-name">
                        Nabnit Jha
                    </h1>
                    <h6>
                    {this.state.AboutMeText} // here state value display successfully
                    </h6>
                    <DIV className="template-self-info">
                        {modelStatus&&<Modals modalBody={this.state.AboutMeText} modalHeading="About Me"></Modals>}
                        //here state value became null
                    </DIV>
                </DIV>

function to make it true

function clickHandle

clickHandle=()=>{
  this.setState({modelStatus:true})
}

You use your function based on your requirement.

user_65444600
Related