I've got a page where is presented single article along with part where u can see info abou loan, based on articles price.
Now I've created bootstrap table, mapped through data, displayed them and everything is fine.
But problem that I got: I want to display additional data under bank name. Now when I do that, other three td won't change their height to stay in same line as first one.
Here is screenshot where everything is ok:
Now when I add two more things under bank:
Now what I was expecting is that, these three right rows shift automatically down, and follow bank(auto adjust height to be same as height of columns in first row). So basically I was expecting result like this:
Is there some way of fixing this?
Here is my Article.js component:
import React, { useEffect, useState, useRef } from 'react';
import { Link } from 'react-router-dom';
import Form from 'react-validation/build/form';
import Input from 'react-validation/build/input';
import CheckButton from 'react-validation/build/button';
import ArticleService from '../services/article.service';
const Article = (props) => {
const form = useRef();
const checkBtn = useRef();
const [content, setContent] = useState([]);
const [dataArr, setDataArr] = useState([]);
const [months, setMonths] = useState([]);
const [loading, setLoading] = useState(false);
const onChangeMonths = (e) => {
const months = e.target.value;
setMonths(months);
};
const handleMonths = async (e) => {
e.preventDefault();
setLoading(true);
if (checkBtn.current.context._errors.length === 0) {
const id = props.match.params.id;
try {
const res = await ArticleService.article(id, months);
setContent(res.data);
const data = res.data.kredit;
const dataArr = [];
dataArr.push({
name: 'kreditNKS-rataNKS',
price: data.kreditNKS.map((item) => {
return item;
}),
rate: data.rataNKS.map((item) => {
return item;
}),
nks: data.stopaNKS.map((item) => {
return item;
}),
banka: {
eks: data.stopaEKS.map((item) => {
return item;
}),
bankname: data.ime.map((item) => {
return item;
}),
type: data.tip.map((item) => {
return item;
}),
},
});
setDataArr(dataArr);
setLoading(false);
} catch (e) {
setLoading(false);
}
} else {
setLoading(false);
}
};
useEffect(() => {
const fetchPosts = async () => {
const id = props.match.params.id;
const res = await ArticleService.article(id);
setContent(res.data);
const data = res.data.kredit;
const dataArr = [];
dataArr.push({
name: 'kreditNKS-rataNKS',
price: data.kreditNKS.map((item) => {
return item;
}),
rate: data.rataNKS.map((item) => {
return item;
}),
nks: data.stopaNKS.map((item) => {
return item;
}),
banka: {
eks: data.stopaEKS.map((item) => {
return item;
}),
bankname: data.ime.map((item) => {
return item;
}),
type: data.tip.map((item) => {
return item;
}),
},
});
setDataArr(dataArr);
};
fetchPosts();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const a = dataArr;
const render = (item, index) => {
return (
<tr key={index}>
<td>
{item.banka.bankname.map((it, index2) => (
<h4>
{it}
<br></br> //from here
EKS: {item.banka.eks[index2]} when i add this part, height dont change
<br></br>
Tip: {item.banka.type[index2]} //to here
</h4>
))}
</td>
<td>
{item.nks.map((it) => (
<h4>{it}</h4>
))}
</td>
<td>
{item.price.map((it) => (
<h4>{it}</h4>
))}
</td>
<td>
{item.rate.map((it3) => (
<h4>{it3}</h4>
))}
</td>
</tr>
);
};
return (
<div>
<p className='text-dark'>
<Link to='/dashboard'>
<i className='fas fa-arrow-left'></i> Nazad
</Link>
</p>
<div className='container p-3 my-3 bg-dark text-white'>
<strong>Artikal id:{content.id}</strong>
<br></br>
<br></br>
<div className='row'>
<div className='col-sm'>
Opis:
<br></br>
{content.descr}
</div>
<div className='col-sm'>
Cijena
<br></br>
{content.price}
</div>
<div className='col-sm'>
Cijena po metru kvadratnom:
<br></br>
{content.ppm2}/m2
</div>
</div>
</div>
<div className='container'>
<h3>KREDITI ZA CIJENU {content.price}</h3>
<Form onSubmit={handleMonths} ref={form}>
<div className='form-group'>
<label>Vrijeme otplate u mjesecima:</label>
<Input
type='text'
className='form-control w-25'
name='months'
value={months}
onChange={onChangeMonths}
/>
<button
className='btn btn-primary btn-block w-25'
disabled={loading}
>
{loading && (
<span className='spinner-border spinner-border-sm'></span>
)}
<span>Prika?i</span>
</button>
<CheckButton style={{ display: 'none' }} ref={checkBtn} />
<small>
Ako se ne unese vrijeme otplate kredita, kredit se izra?unava za
60 mjeseci
</small>
</div>
</Form>
</div>
<div className='table-responsive'>
<table className='table'>
<thead className='thead-dark'>
<tr>
<th scope='col'>Informacije o banci</th>
<th scope='col'>NKS</th>
<th scope='col'>Ukupna cijena kredita</th>
<th scope='col'>Mjese?na rata kredita</th>
</tr>
</thead>
<tbody>{a.map(render)}</tbody>
</table>
</div>
</div>
);
};
export default Article;
EDIT:
Also this is how my a look where I'm mapping for data:
question from:
https://stackoverflow.com/questions/65919896/why-inside-my-bootstrap-table-td-wont-change-height-based-on-other-td 
