How to align 2 rows horizontally in react?

user_16134191 0
Viewed 823

I am making a react app and I have few columns which are to be mapped to values,I want to map the field names horizontally with field values.I tried with the below code but still it is a bit un-aligned.

my code:

Task class:

  return (
    
    
    
  
    <div >
      <div>
        <a className="clientparams1">{task.clientName} </a>
      </div>
      <div>
        <a className="clientparams1">{task.clientId}</a>
      </div>
      <div>
        <a className="clientparams1">{task.clientSecret}</a>
      </div>
      <div>
        <a className="clientparams1">{task.status}</a>
      </div>
      <div>
        <a className="clientparams1">{task.generated_on}</a>
      </div>
      {/* <div>
        <FaTimes
          className="clientparams"
          style={{ color: "red", cursor: "pointer" }}
          onClick={() => onDelete(task.clientId)}
        />
      </div> */}
    </div>
    
   
  );
};

    export default Task;

Tasks class:

It contains headings.

return (
    <div>
     <div className="form1">
    <div>
    <a className="clientparams1">clientName</a>
      </div>
      <div>
        <a className="clientparams1">clientId</a>
      </div>
      <div>
        <a className="clientparams1">clientSecret</a>
      </div>
      <div>
        <a className="clientparams1">status</a>
      </div>
      <div>
        <a className="clientparams1">generated_on</a>
      </div>
      

    </div>
     
      {tasks.map((task, index) => (
        <Task key={index} task={task} onDelete={onDelete} />
      ))}
    </div>
  )
}

In this code I have a parent div inside which there are 2 div tags and 1st div has all the field names and 2nd field has all the values to their corresponding field names.

Here are my css classes that i am using above:

    .clientparams{
   margin: 40px;
   height: 30px;
   width: 250px;
   font-size: medium;
 }

 .form1{
  display: flex;
 
 }

.main_container{
  display: inline-block;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  text-align: justify;
  
  }

Can someone help me with this?

Thanks

reactjs alignment css html javascript
2 Answers

in your Task component, inside of .form1 div, I have made two div. In the first one, I have added ur client info. and in the second div, I have added the Task component. These 2 divs have their own className client_container and task_container respectively. Their className is assigned with CSS property.

return (
    <div className="main_container>
     <div className="form1">
       <div className="client_container">
         <div>
         <a className="clientparams1">clientName</a>
         </div>
         <div>
         <a className="clientparams1">clientId</a>
         </div>
         <div>
         <a className="clientparams1">clientSecret</a>
         </div>
         <div>
         <a className="clientparams1">status</a>
         </div>
         <div>
         <a className="clientparams1">generated_on</a>
         </div>
       </div>
       <div className="task_container">
         {tasks.map((task, index) => (
           <Task key={index} task={task} onDelete={onDelete} />
         ))}
       </div>
    </div>
  )
}

#css

.form1{
display: flex;
flex-direction: column;
}

.client_container{
display: flex;
}

.task_container{
display: flex;
}
user_145686700

You can try html table like this.

<table>
  <tr>
    <th>clientName</th>
    <th>clientId</th>
    <th>clientSecret</th>
    <th>status</th>
    <th>generated_on</th>
    </tr>
  <tr>
    <td>{task.clientName}</td>
    <td>{task.clientId}</td>
    <td>{task.clientSecret}</td>
    <td>{task.status}</td>
    <td>{task.generated_on}</td>
  </tr>
</table>

Hope that will solve your issue.

user_43079850
Related