React JS Interview Questions and Answers for beginner

Question: How to use JavaScript expressions in reactJS?
To use the expression in reactjs, you need to wrap the expression with with curly brackets {}.
For Example:
{1+1}
{2*2}
{30/3}
{i == 1 ? 'True!' : 'False'}


Question: How to use JavaScript Expressions in reactJS?

class App extends React.Component {
   render() {
      var myStyle = {
         fontSize: 40,
         color: '#FF0000'
      }
      return (
         <div>
<h1>
Header</h1>
</div>
);
   }
}
export default App;

Question: What is state in ReactJS?
State is the place where the data comes from.
We should try to make our state simple and minimize the number of stateful components.

class App extends React.Component {
   constructor(props) {
      super(props);
  
      this.state = {
         header: "This is Header from State",
         content: "This is Content from State"
      }
   }
   render() {
      return (
         <div>
<h1>
{this.state.header}</h1>
<h2>
{this.state.content}</h2>
</div>
);
   }
}

Question: How to Validating Props?

class App extends React.Component {
   render() {
      return ( 
         <div>
<h1>
 Hello, {this.props.name} </h1>
<h3>
Your Mobile: {this.props.propNumber}</h3>
<h3>
Address: {this.props.propString}</h3>
</div>
);
   }
}
App.propTypes = {
   name: PropTypes.string,
   propNumber: PropTypes.number,
   propString: PropTypes.string,
};
App.defaultProps = {
   name: 'Dear User',   
   propNumber: 9888888888,
   propString: "#8555, Sector 45D, Chandigarh"
}

Question: What is difference between setState and forceUpdate() and findDOMNode() in reactJS?
setState() It is used to update the state of the component.It will only add changes to the original state.
forceUpdate() It is used to forceUpdate the state of the component.It will only update to the original state.
findDOMNode() It is used to forceUpdate the state of the component.It will only update to the original state.


Question: Give working example of forceUpdate() in reactJS?

class App extends React.Component {
   constructor() {
      super();
      this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
   };
   forceUpdateHandler() {
      this.forceUpdate();
   };
   render() {
      return (
         <div>
<button onclick="{this.forceUpdateHandler}">Click to Update</button>
            <br />
<h4>
Random number: {Math.random()}</h4>
</div>
);
   }
}

Question: How to use Loop in ReactJS?

var rows = [];
for (var i = 0; i < numrows; i++) {
    rows.push(<objectrow key="{i}">);
}
return tbody(rows);  </objectrow>

Question: What is meaning of ... in ReactJS?
... is called Spread Attributes.
If you already have props as an object, and you want to pass it in JSX, you can use ... as a "spread" operator to pass the whole props object. For Example:

var parts = ['two', 'three'];
var numbers = ['one', ...parts, 'four', 'five'];

Question: How to set focus in reactJS?
You can use componentDidMount for the same.

class App extends React.Component{
  componentDidMount(){
    this.nameInput.focus();
  }
  render() {
    return(
      <div>
<input defaultvalue="Won't focus" />
        <input ref="{(input)" /> { this.nameInput = input; }} 
          defaultValue="will focus"
        /&gt;
      </div>
);
  }
}