ReactJS – Use React JSX And Write Complex Code

In this article, we will show you code to correct the way of writing the JSX code. If you write the wrong jsx format then react js will give you an error. JSX is an import code file in react js tutorial. We can work on the js file but jsx extension tells you you are working in react.

Let’s have a look at the below example that is wrong in terms of jsx file but generally, we do such like that and it gives result. Suppose you have created a expend item file in your application. Don’t worry in the upcoming react tutorial we will talk about such an application.

Now in the expend item file you want to add price, date, item name and its sku. Then you will do like below example:

JSX Example:

const Expenditem = () => {
return (<div>Date: ---- </div><div>Price: ----</div><h2>Item Name: -----</h2><div>SKU:</div>);
}
export default Expenditem;

We will write like above but JSX react give an error. You will ask why? The reason is JSX has one thumbrule as i did in my previous lacture, we need one parent wrapping element. Like below example:

JSX Example#2:

const Expenditem = () => {
return (
   <div>
			<div>Date: ---- </div>
			<div>Price: ----</div>
			<h2>Item Name: -----</h2>
			<div>SKU:</div>
    </div>
  );
}
export default Expenditem;

Hope the above example gives you an idea how you will write complex jsx code and don’t forget about wrapping element when you are working in react js or react native, please connect with us social channels to get more reactjs tutorial.

Stay in touch. Ask Questions.
Lean on us for help, strategies and expertise.

Leave a Reply

Your email address will not be published. Required fields are marked *