0

I'm beginnner and I create my first app in React JS this is my code now:

function formatName(user) {
  return user.firstName + ' ' + user.lastName;

}
function formatCountry(user) {
  
    return user.country;
  
}


//this is my objet base of the user
const user = {
  firstName: 'Simon',
  lastName: 'willians',
  country:'USA'};

const element = <h1>Hello, {formatName(user)}!</h1>;
const element2 = <h1>Country,{formatCountry(user)}!</h1>;

ReactDOM.render(element, document.getElementById('root'));
ReactDOM.render(element, document.getElementById('root'));
<div id="root"></div>

I create this app follow this tutorial of Facebook React JS

Okay I created a object with name user I return this object from formatName and formatCountry and the element of the object whatever exist in the object .

I try call country too in this sentence:

const element2 = <h1>Country,{formatCountry(user)}!</h1>;

any expert in React JS could tell me where is my error or where I mistakes?

Improve this question
3
  • You need a single root component that gets rendered via ReactDOM.render(). That root component would then contain your element and element2 components. Commented Jun 28, 2018 at 22:10
  • this way : function formatName(user) { return user.firstName + ' ' + user.lastName + ' '+ user.country; } it working well Commented Jun 28, 2018 at 22:14
  • can you see my now , here : codepen.io/gilbertoquinteroA/pen/xzQovM?editors=0010 Commented Jun 28, 2018 at 22:14

2 Answers 2

Reset to default
1

First of all you are trying to render same element, not element and element2. Secondly, if you render elements like that, only the last one is being rendered in the DOM. You need some wrapper element and inside this wrapper you will have your elements.

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

function formatCountry(user) {
    return user.country;
}

const user = {
    firstName: 'Simon',
    lastName: 'willians',
    country:'USA'};

const element2 = <h1>Country,{formatCountry(user)}!</h1>;

const element = ( 
  <div>
      <h1>Hello, {formatName(user)}!</h1>
      {element2}
  </div>
);

ReactDOM.render(element, document.getElementById('root'));

Maybe more elegantly:

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

function formatCountry(user) {

    return user.country;

}

const user = {
  firstName: 'Harper',
  lastName: 'Perez',
  country:'USA',
};

const userCountry = <h1>Country,{formatCountry(user)}!</h1>;

const userName = ( 
  <h1>Hello, {formatName(user)}!</h1>
);

const element = (
  <div>
      {userName}
      {userCountry}
  </div>
)

ReactDOM.render(element, document.getElementById('root'));
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I understand the code but why you call this part : </h1> {element2} </div> I did not understand this part
Because JSX elements need to be wrapped in one parent, wrapping element. I looked the documentation but this is not mentioned and I think it should be.
0

You have to use Babel. The tutorial you followed uses Babel to compile JavaScript under the hood.

1) Add Babel script to your head tag

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

2) Add type="text/babel" to the script tag where you wrote your code.

<script type="text/babel">
   function formatName(user) {
       return user.firstName + ' ' + user.lastName;
   }
   const user = {
       firstName: 'Harper',
       lastName: 'Pereez',
   };

   const element = <h1>Hello, {formatName(user)}!</h1>;
   ReactDOM.render(element,document.getElementById('root')
</script>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.