We Keep Coding

I am found 'subject' is of type 'unknown'. error during the npm start but code is run and working how to resolved it?

Object.entries(APIData).map(([key, subject], i) => {
return (
<div className="id-result" key={i}>
<div id="heading-result">
<h2 key={i} className="heder-result">{subject.title}</h2>
{/* <img id="pdficon" src={pdficon} alt="download pdf" height="20px" /> */}
<Button className="download-button"><PDFReader /></Button>
</div>
<hr className="hr-result" />
{/* <p className="para-result" key={i}>{subject.para}</p> */}
<p dangerouslySetInnerHTML={{ __html: subject.para }}>
</p>
</div>
)
I am facing error on subject that 'subject' is of type 'unknown'.

Div content should not push down div below

Edit: It seems that this solution comes close to what I want, but I want it without declaring a fixed or calculated height. Any way to achieve that?
Im creating a chat app using React and Chakra-ui. The div containing the chat messages should not push the div with the input below outside the viewport, and it should be scrollable. I have no idea what Im doing wrong as CSS is not my strong suit. I tried giving the parent div overflow-y: scroll and a lot of other things but it just doesnt work. Code snippet and screenshots below:
<Flex>
<Sidebar items={[]} />
<Flex flexDirection="column" w="100%">
<Header heading={'CHAT'} />
<Flex direction="column" height="100%" width="100%" pt="1rem">
<Flex paddingX="1.5rem" direction="column">
<Message username="User A" body="Test Message 1" time="13:39" />
<Message username="User B" body="Test Message 2" time="13:40" />
<Message username="User A" body="Test Message 1" time="13:39" />
<Message username="User B" body="Test Message 2" time="13:40" />
</Flex>
<Flex marginTop="auto" justify="space-between" width="100%">
<Textarea
resize="none"
color="#fff"
placeholder="Type something..."
borderTopWidth="1px"
borderColor="#6b6b6b"
borderRadius="0px"
_placeholder={{ color: '#6b6b6b' }}
paddingY={2}
paddingX={4}
variant="unstyled"
/>
<Flex
height="100%"
borderTopWidth="1px"
borderColor="#6b6b6b"
px="1rem"
>
<Center>
<IconButton size="sm" isRound icon={<ArrowRightIcon />} />
</Center>
</Flex>
</Flex>
</Flex>
</Flex>
</Flex>

I've found the solution. Chakra-ui's Grid component (and css grid in general) is the best way to achieve this what I wanted to achieve:
<Grid
height="100vh"
templateRows="repeat(15, 1fr)"
templateColumns="repeat(5, 1fr)"
>
<GridItem rowSpan={15} colSpan={1}>
<Sidebar items={state.rooms[ROOM_NAME]?.participants || []} />
</GridItem>
<GridItem colSpan={4} rowSpan={1}>
<Header heading={ROOM_NAME} />
</GridItem>
<GridItem colSpan={4} rowSpan={13} overflowY="auto">
<Flex direction="column">
<Box paddingX="1.5rem">
<Message username="User A" body="Test Message 1" time="13:39" />
<Message username="User B" body="Test Message 2" time="13:40" />
</Box>
</Flex>
</GridItem>
<GridItem colSpan={4} rowSpan={2}>
<Flex justify="space-between" width="100%">
<Textarea
resize="none"
color="#fff"
placeholder="Type something..."
borderTopWidth="1px"
borderColor="#6b6b6b"
borderRadius="0px"
_placeholder={{ color: '#6b6b6b' }}
paddingY={2}
paddingX={4}
variant="unstyled"
minHeight={null}
/>
<Flex borderTopWidth="1px" borderColor="#6b6b6b" px="1rem">
<Center>
<IconButton size="sm" isRound icon={<ArrowRightIcon />} />
</Center>
</Flex>
</Flex>
</GridItem>
</Grid>

You should give overflow-y: scroll; for your Flex in this part then it should scroll instead of pushing to down when it reaches to max height of that element
<Flex paddingX="1.5rem" direction="column">
<Message username="User A" body="Test Message 1" time="13:39" />
<Message username="User B" body="Test Message 2" time="13:40" />
<Message username="User A" body="Test Message 1" time="13:39" />
<Message username="User B" body="Test Message 2" time="13:40" />
</Flex>

A pretty common solution to this issue can be found here
Just set the parent div with position:relative. Then, the inner item you want to stick to the bottom, just use position:absolute to stick it to the bottom of the item.
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: lightblue;
color: white;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Lorem ipsum.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ne.</p>
<h2>Lorem ipsum.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ne.</p>
<h2>Lorem ipsum.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ne.</p>
<h2>Lorem ipsum.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ne.</p>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>

How to use a vertical line in a react project which adjust the height dynamiclly?

I need to add a vertical line in my react project.I have used scss to create this. But I have given a fixed size there. What I need to do is adjust the height of the line when card size varies. That when I add new comments the card size get increases.But the line height remains same.How can I get the current card size?
This is how it looks like.
<Col sm={1}>
<div className="vl"></div>
</Col>
styles.scss
.vl {
border-left: 1px solid $disabled-icons-light-blue;
height: 800px;
padding-right: 0px;
}
Given below is the file where I have used the line.
<div>
<div className="icon-list">
<TicketAction icon={<ChevronLeft />} tooltip="Back" />
<TicketAction icon={<ArrowClockwise />} tooltip="Refresh" />
<TicketAction icon={<Archive />} tooltip="Archive" />
<TicketAction icon={<Share />} tooltip="E-mail" />
<TicketAction icon={<Pencil />} tooltip="Edit" />
</div>
<div>
<Card className="card">
<Row>
<Col sm={9}>
<Card.Body>
<div className="header-date text p2">
<p2>2 DAYS AGO ON TUESDAY AT 5.43 AM</p2>
</div>
<Row>
<Col sm={3} className="title">
<h2>{title}</h2>
</Col>
<Col sm={7} className="drop-down">
<PriorityBadge priority="Error" />
</Col>
<Col sm={1} style={{paddingLeft: 20}}>
<Pencil />
Edit
</Col>
</Row>
<div className="ticket-data-topic text p3">
<p3>Hello,</p3>
<div className="ticket-data-content text p4">
<p4
dangerouslySetInnerHTML={{
__html: description
}}
></p4>
</div>
<hr />
<br />
<Tabs>
<Tab eventKey={1} title="Comments">
<br />
<br />
{this.displayComments()}
<br />
<h3 className="add-comment-heading">Add Comment</h3>
<AddComment ticketID={this.state.id} />
</Tab>
<Tab
eventKey={2}
title="History"
className="nav-item nav-link active"
>
History
</Tab>
</Tabs>
</div>
</Card.Body>
</Col>
<Col sm={1}>
<div className="vl"></div>
</Col>
<Col sm={2} className="ticket-data-item-col">
<Card.Body>
<div className=" ticket-item-title text p4">
<p>Created by</p>
</div>
<h4>John Doe (john#gmail.com)</h4>
<p className="ticket-data-item">{date}</p>
<div className=" ticket-item-title text p4">
<p>Ticket ID</p>
</div>
<h4 className="ticket-data-item">{id}</h4>
<div className=" ticket-item-title text p4">
<p>Employer</p>
</div>
<h4 className="ticket-data-item">{employer}</h4>
<div className=" ticket-item-title text p4">
<p>Assigned to</p>
</div>
<h4 className="ticket-data-item">{assignee}</h4>
<div className=" ticket-item-title text p4">
<p>Status</p>
</div>
<h4 className="ticket-data-item">{status}</h4>
<div className=" ticket-item-title text p4">
<p>Priority</p>
</div>
<div className=" ticket-data-item-badge text p4">
<PriorityBadge priority={priority} />
</div>
<div className=" ticket-item-title text p4">
<p>Last Updated</p>
</div>
<h4>John Doe</h4>
<p>03/05/2020</p>
</Card.Body>
</Col>
</Row>
</Card>
</div>
</div>

Don't set any height:
Use flex or grid to set the layout and don't set
align-items: 'center'
Then you will be fine the box will grow as your content grow.
For the vertical line use a border-left or border-right, so that the vertical border will take the height of the Content

MaterialUI two IconButtons in GridListTile

I have the following GridListTile and want to add a second button but it is not working.
I have tried adding two ActionIcons but only one of them is displaying?
<GridListTile key={tile.img}>
<img src={tile.img} alt={tile.title} />
<GridListTileBar
title={tile.title}
classes={{
root: classes.titleBar,
title: classes.title,
}}
actionIcon={
<a href={tile.link} target="_blank">
<IconButton aria-label={`star ${tile.title}`}>
<PlayCircleOutlineIcon
className={classes.title}
/>
</IconButton>
</a>
}
actionIcon={
<a href={tile.link} target="_blank">
<IconButton aria-label={`star ${tile.title}`}>
<PlayCircleOutlineIcon
className={classes.title}
/>
</IconButton>
</a>
}
/>
</GridListTile>
Any ideas?

Would this work?
<GridListTile key={tile.img}>
<img src={tile.img} alt={tile.title} />
<GridListTileBar
title={tile.title}
classes={{
root: classes.titleBar,
title: classes.title,
}}
actionIcon={
<>
<a href={tile.link} target="_blank">
<IconButton aria-label={`star ${tile.title}`}>
<PlayCircleOutlineIcon className={classes.title} />
</IconButton>
</a>
<a href={tile.link} target="_blank">
<IconButton aria-label={`star ${tile.title}`}>
<PlayCircleOutlineIcon className={classes.title} />
</IconButton>
</a>
</>
}
/>
</GridListTile>

TypeError: this.state.users.map is not a function reactjs

I am trying to display a users information on the page but I keep getting an error when I am using this.state.users.map. The same function worked on another page so I don't know why its not working on this page.
import React, { Component, Fragment } from "react";
import {
Row,
Card,
CardBody,
Nav,
Table,
NavItem,
UncontrolledDropdown,
DropdownToggle,
DropdownItem,
DropdownMenu,
TabContent,
TabPane
} from "reactstrap";
import { NavLink } from "react-router-dom";
import classnames from "classnames";
import GalleryProfile from "../../../containers/pages/GalleryProfile";
import Breadcrumb from "../../../containers/navs/Breadcrumb";
import { Colxx } from "../../../components/common/CustomBootstrap";
import IntlMessages from "../../../helpers/IntlMessages";
import SingleLightbox from "../../../components/pages/SingleLightbox";
import { injectIntl } from "react-intl";
import whotoFollowData from "../../../data/follow";
import UserCardBasic from "../../../components/cards/UserCardBasic";
import posts from "../../../data/posts";
import Post from "../../../components/cards/Post";
import Rating from "../../../components/common/Rating";
class EditUser extends Component {
constructor(props) {
super(props);
this.toggleTab = this.toggleTab.bind(this);
this.state = {
activeTab: "1",
users: [],
};
this.friendsData = whotoFollowData.slice();
this.followData = whotoFollowData.slice(0,5);
}
toggleTab(tab) {
if (this.state.activeTab !== tab) {
this.setState({
activeTab: tab
});
}
}
async componentDidMount() {
const { userId } = this.props.match.params
try {
const url = `APIURL/${userId}`
const response = await fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Access-Token': '1*adminaccesstoken'
}
}).then(response => response.json())
.then(json => {
console.log(json);
this.setState({
users: json
})
});
} catch (error) {
console.error('Error:', error);
}
}
renderUser() {
return this.state.users.map(function(user, index) {
const { userId, firstName, lastName } = user //destructuring
return (
<div key={user.userId}>
<h1>{user.firstName} {user.lastName}</h1>
</div>
)
})
}
render() {
return (
<Fragment>
<Row>
<Colxx xxs="12">
{this.renderUser()}
<div className="text-zero top-right-button-container">
<UncontrolledDropdown>
<DropdownToggle
caret
color="primary"
size="lg"
outline
className="top-right-button top-right-button-single">
<IntlMessages id="pages.actions" />
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>
<IntlMessages id="pages.header" />
</DropdownItem>
<DropdownItem disabled>
<IntlMessages id="pages.delete" />
</DropdownItem>
<DropdownItem>
<IntlMessages id="pages.another-action" />
</DropdownItem>
<DropdownItem divider />
<DropdownItem>
<IntlMessages id="pages.another-action" />
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</div>
<br />
<Nav tabs className="separator-tabs ml-0 mb-5">
<NavItem>
<NavLink className={classnames({ active: this.state.activeTab === "1", "nav-link": true })}
onClick={() => { this.toggleTab("1"); }} to="#">
<IntlMessages id="pages.profile" />
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: this.state.activeTab === "2", "nav-link": true })}
onClick={() => { this.toggleTab("2"); }}
to="#">
<IntlMessages id="pages.images" />
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: this.state.activeTab === "3", "nav-link": true })}
onClick={() => { this.toggleTab("3"); }}
to="#">
<IntlMessages id="pages.friends" />
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: this.state.activeTab === "4", "nav-link": true })}
onClick={() => { this.toggleTab("4"); }}
to="#">
OTHER
</NavLink>
</NavItem>
</Nav>
<br />
<br />
<br />
<TabContent activeTab={this.state.activeTab}>
<TabPane tabId="1">
<Row>
<Colxx xxs="12" lg="5" xl="4" className="col-left">
<SingleLightbox thumb="/assets/img/profile-pic-l.jpg" large="/assets/img/profile-pic.jpg" className="img-thumbnail card-img social-profile-img" />
<Card className="mb-4">
<CardBody>
<div className="text-center pt-4">
<p className="list-item-heading pt-2"></p>
</div>
<p className="text-muted text-small mb-2"><IntlMessages id="pages.location" /></p>
<p className="mb-3"></p>
<p className="text-muted text-small mb-2">Email</p>
<p className="mb-3"></p>
<p className="text-muted text-small mb-2">Phone Number</p>
<p className="mb-3"></p>
<p className="text-muted text-small mb-2">Date of Birth</p>
<p className="mb-3">10/13/1998</p>
<p className="text-muted text-small mb-2">VIP?</p>
<p className="mb-3"></p>
<p className="text-muted text-small mb-2">Points</p>
<p className="mb-3"></p>
</CardBody>
</Card>
<Card className="mb-4">
<CardBody>
<p className="text-muted text-small mb-2">
Reviews
</p>
<div className="mb-3">
<p><b>Paris Scottsdale</b></p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque quis cursus mauris</p>
<Rating total={5} rating={4} interactive={false} />
</div>
<div className="mb-3">
<p><b>Paris Scottsdale</b></p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque quis cursus mauris</p>
<Rating total={5} rating={1} interactive={false} />
</div>
<div className="mb-3">
<p><b>Paris Scottsdale</b></p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque quis cursus mauris</p>
<Rating total={5} rating={5} interactive={false} />
</div>
<div className="mb-3">
<p><b>Paris Scottsdale</b></p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque quis cursus mauris</p>
<Rating total={5} rating={5} interactive={false} />
</div>
</CardBody>
</Card>
</Colxx>
<Colxx xxs="12" lg="7" xl="8" className="col-right">
{
posts.map((itemData) => {
return <Post data={itemData} key={itemData.key} className="mb-4" />
})
}
</Colxx>
</Row>
</TabPane>
<TabPane tabId="2">
<GalleryProfile/>
</TabPane>
<TabPane tabId="3">
<Row>
{
this.friendsData.map((itemData) => {
return (
<Colxx xxs="12" md="6" lg="4" key={itemData.key}>
<UserCardBasic data={itemData} />
</Colxx>
)
})
}
</Row>
</TabPane>
<TabPane tabId="4">
<Colxx xxs="12" lg="12" xl="12" className="col-right">
<Card className="mb-4">
<CardBody>
<h3 className="text-muted mb-2">
Purchases
</h3>
<div className="mb-3">
<p><b>INTL - 10/20/19</b></p>
<p>$50.00</p>
</div>
<div className="mb-3">
<p><b>Day N Vegas - 10/20/19</b></p>
<p>$500.00</p>
</div>
<div className="mb-3">
<p><b>ClubX VIP - 10/20/19</b></p>
<p>$39.99</p>
</div>
<div className="mb-3">
<p><b>INTL - 10/20/19</b></p>
<p>$50.00</p>
</div>
</CardBody>
</Card></Colxx>
<Colxx xxs="12" lg="12" xl="12" className="col-right">
<Card className="mb-4">
<CardBody>
<h3 className="text-muted mb-2">
Rewards
</h3>
<Table hover>
<thead>
<tr>
<th>Check-In ID</th>
<th>Club Name</th>
<th>Points Gained</th>
<th>Points Redeemed</th>
<th>Date</th>
<th>Promotion Type</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>INTL</td>
<td>+15</td>
<td></td>
<td>10/12/19</td>
<td>Check-In</td>
</tr>
<tr>
<th scope="row">2</th>
<td>ClubX Welcome</td>
<td>+300</td>
<td></td>
<td>10/10/19</td>
<td>Welcome Bonus</td>
</tr>
<tr>
<th scope="row">3</th>
<td>INTL</td>
<td></td>
<td>-300</td>
<td>10/10/19</td>
<td>Free Drink</td>
</tr>
</tbody>
</Table>
</CardBody>
</Card></Colxx>
<Colxx xxs="12" lg="12" xl="12" className="col-right">
<Card className="mb-4">
<CardBody>
<h3 className="text-muted mb-2">
Promotions
</h3>
<Table hover>
<thead>
<tr>
<th>Promotion ID</th>
<th>Club Name</th>
<th>Promotion Title</th>
<th>Date Started</th>
<th>Date Ended</th>
<th>Promotion Type</th>
<th>Redeemed</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>INTL</td>
<td>BOGO On All Bottles</td>
<td>10/10/19</td>
<td>10/12/19</td>
<td>BOGO</td>
<td>No</td>
</tr>
<tr>
<th scope="row">1</th>
<td>INTL</td>
<td>BOGO On All Bottles</td>
<td>10/10/19</td>
<td>10/12/19</td>
<td>BOGO</td>
<td>Yes</td>
</tr>
<tr>
<th scope="row">1</th>
<td>INTL</td>
<td>BOGO On All Bottles</td>
<td>10/10/19</td>
<td>10/12/19</td>
<td>BOGO</td>
<td>No</td>
</tr>
</tbody>
</Table>
</CardBody>
</Card></Colxx>
<Colxx xxs="12" lg="12" xl="12" className="col-right">
<Card className="mb-4">
<CardBody>
<h3 className="text-muted mb-2">
Reservations
</h3>
<Table hover>
<thead>
<tr>
<th>Reservation ID</th>
<th>Club Name</th>
<th># of People</th>
<th>Time Expected</th>
<th>Table</th>
<th>VIP?</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>INTL</td>
<td>10</td>
<td>10/19/2019 10:30pm</td>
<td>$3,000 Minimum</td>
<td>Yes</td>
<td><button className="btn-primary-1" id="editUser" onclick="" >See More</button></td>
</tr>
<tr>
<th scope="row">2</th>
<td>INTL</td>
<td>10</td>
<td>10/19/2019 10:30pm</td>
<td>$3,000 Minimum</td>
<td>Yes</td>
<td><button className="btn-primary-1" id="editUser" onclick="" >See More</button></td>
</tr>
</tbody>
</Table>
</CardBody>
</Card></Colxx>
</TabPane>
</TabContent>
</Colxx>
</Row>
</Fragment>
);
}
}
export default injectIntl(EditUser);
I have tried everything that has worked in the past but still no success. My main goal is to be able to display all of the users data on this page.

This may be because of json that you are expecting is not array, please check when renderUser() getting called at first time before componentDidMount gets called.