This is the first time I am trying to build a real layout for my ReactJS project, but I ran into this error (Error ',' expected.ts(1005)) and can not get it off.
Here is the html of the layout I intend to build:
<div>
{selectedInput === null ? (
<div>
<div>
some html
</div>
<div>
{
array.slice(3, 100).map((doc, index) =>
<div>
some html
</div>
} <== here the error
</div>
</div>
) : (
<div>
some html
</div>
)
}
</div>
I encounter the error in the last brace
EDIT: I apologize to whoever replied, but I wanted to synthesize the code and I did a horrible job. Now I have put the correct version.
You missed the closing parenthesis) of map.
Try adding parenthesis.
Updated code:
<div>
{selectedInput === null ? (
<div>
<div>some html</div>
<div>
{array.slice(3, 100).map((doc, index) => (
<div>some html</div>
))}
</div>
</div>
) : (
<div>some html</div>
)}
</div>
You forgot to add closing braces, '}'.
This should work
<div>
{selectedInput === null ? (
<div>
<div>
some html
</div>
<div>
{
getOrder.slice(3, 100).map((doc, index) =>
<div>
some html
</div>
} <== here the error
</div>
</div>
}
</div>
Too many mistakes.
Feeling like you don't understand how it works.
This code should work, but you need to understand it thoroughly.
<div>
{selectedInput === null ? (
<div>
<div>some html</div>
<div>
{getOrder.slice(3, 100).map((item, i) => {
return <div key={i}>some html</div>;
})}
</div>
</div>
) : (
<div>Another content</div>
)}
</div>;
Related
I need to put 2 rows of text, the "API Name" and "Resource Name" to the left, and put another 2 rows of text, the "Service Name" and "Status" to the right.
like this
However, the result is not what I want. this is my result:
my code:
const ViewHeader = (props: ViewHeaderProps) => {
const {apiName, resourceName, serviceName, apiStatus, desc, rpcName, verb, uri} = props;
return (
<div className="view-api-header">
<span>
<div>{apiName}</div>
<div>{serviceName}</div>
</span>
<span>
<div>{resourceName}</div>
<div>{apiStatus}</div>
</span>
<div>
<span>{apiName}</span>
<span>{serviceName}</span>
</div>
<div>
<span>{resourceName}</span>
<span>{apiStatus}</span>
</div>
</div>
);
};
I'm new to html and react, is there anyway to format the 4 elements correctly?
I suppose the HTML code should be like this
<div style="clear: both">
<div style="float: left">{apiName}</div>
<div style="float: right">{serviceName}</div>
</div>
<div style="clear: both">
<div style="float: left">{resourceName}</div>
<div style="float: right">{apiStatus}</divstyle>
</div>
I have an array with <p> and <div> items and I'm trying to render them as HTML, but whenever I try to render it, the values just appear as plain code and not the normal paragraphs. So I have an array with let's say that this information:
<p>The first paragraph of this pinned topic will be visible as a welcome message to all new visitors on your homepage. It’s important!</p>
<p><strong>Edit this</strong> into a brief description of your community:</p>
And when it gets rendered in the page, it gets rendered as this instead of the paragraph that should be rendered it gets rendered as plain code:
this is how it renders
This is the code I've used for render:
useEffect(() => {
axios.get(`/api/get-post?id=${pid}`)
.then(res => setPostData(res.data))
.catch(err => console.log(err.response))
}, [])
console.log(postData?.post_stream?.posts[0]?.cooked)
return (
<div>
<div className={styles.containerPadding}>
<div className={styles.mainContainer}>
<div className={styles.blackLine}>
</div>
<div className={styles.titleContainer}>
<div>
<h1>{postData.title}</h1>
</div>
<div>
<h1></h1>
</div>
</div>
<div className={styles.postInformationContainer}>
<div>
</div>
<div>
<p>{postData?.post_stream?.posts[0]?.cooked}</p>
</div>
</div>
</div>
</div>
</div>
You can use dangerouslySetInnerHTML for converting your string data to HTML, but for safety (avoiding XSS attack), you should sanitize your HTML string before using dangerouslySetInnerHTML by DOMPurify
import DOMPurify from 'dompurify'
const sanitizedHtml = DOMPurify.sanitize(postData?.post_stream?.posts[0]?.cooked)
And then call it like this
dangerouslySetInnerHTML={{__html: sanitizedHtml}}
useEffect(() => {
axios.get(`/api/get-post?id=${pid}`)
.then(res => setPostData(res.data))
.catch(err => console.log(err.response))
}, [])
const sanitizedHtml = DOMPurify.sanitize(postData?.post_stream?.posts[0]?.cooked)
return (
<div>
<div className={styles.containerPadding}>
<div className={styles.mainContainer}>
<div className={styles.blackLine}>
</div>
<div className={styles.titleContainer}>
<div>
<h1>{postData.title}</h1>
</div>
<div>
<h1></h1>
</div>
</div>
<div className={styles.postInformationContainer}>
<div>
</div>
<div>
<p dangerouslySetInnerHTML={{__html: sanitizedHtml}}></p>
</div>
</div>
</div>
</div>
</div>
One side note, without HTML string sanitization, your HTML data can be interfered by some script injections which would harm your website or your system.
You can use html-react-parser package
This is how your code will look like
import parse from 'html-react-parser'
useEffect(() => {
axios.get(`/api/get-post?id=${pid}`)
.then(res => setPostData(res.data))
.catch(err => console.log(err.response))
}, [])
return (
<div>
<div className={styles.containerPadding}>
<div className={styles.mainContainer}>
<div className={styles.blackLine}>
</div>
<div className={styles.titleContainer}>
<div>
<h1>{postData.title}</h1>
</div>
<div>
<h1></h1>
</div>
</div>
<div className={styles.postInformationContainer}>
<div>
</div>
<div>
<p>{parse(postData?.post_stream?.posts[0]?.cooked)}</p>
</div>
</div>
</div>
</div>
</div>
You can use 'dangerouslySetInnerHTML' like everyone else.
And I need to register the tags to use.
import DOMPurify from 'dompurify';
<div
dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(
view_inner ?? '<div>Unable to get data.</div>',
{
FORCE_BODY: true,
ADD_TAGS: ['style'],
ADD_ATTR: ['target'],
ALLOWED_TAGS: [
'span',
'div',
'link',
'table',
'thead',
'tr',
'th',
'tbody',
'td',
],
},
),
}}
/>
console.log(data.allShopifyProductVariant.nodes[0].product.title)
return (
<div>
<div>
{data.allShopifyProductVariant.nodes.map(node => {
<div>
{node.product.title}
</div>
})}
</div>
</div>
)
}
export const query = graphql`
query CollectionQuery {
allShopifyProductVariant(filter: {product: {productType: {in: "20 lb. Plotter Paper"}}}) {
nodes {
compareAtPrice
sku
price
product {
title
images {
gatsbyImageData(width: 150)
}
productType
}
}
}
}`
export default Collection;
Expecting this function to return the product title, for some reason it returns nothing. I've tried using dangerously set innerhtml but nothing comes up, no error. I am able to console.log the {node.product.title} and it returns exactly what I want to display but for some reason it is not rendering to the div. Any help is appreciated, thanks in advance :D
You are missing the return statement:
return (
<div>
<div>
{data.allShopifyProductVariant.nodes.map(node => {
return <div>
{node.product.title}
</div>
})}
</div>
</div>
)
Or using the implicit return:
return (
<div>
<div>
{data.allShopifyProductVariant.nodes.map(node => (
<div>
{node.product.title}
</div>
))}
</div>
</div>
)
In my project I am receiving array from backend in that JSON object is ->
list=[{
deleted: false,
details:{
groupNumber: "123ddd",
insuranceName: "Blue Sheild insurance",
memberId: "12345",
payerId: "21212",
relationToSubscriber: null,
ssn: true,
subscriberDoB: "1991-01-01",
subscriberFirstName: "Payor A",
subscriberLastName: "Added",
subscriberMiddleName: "middle",
},
editStatus: "PENDING",
imageInfo: null,
tier: "PRIMARY",
},]
Passing data from parent component
<div className="insurance-sub-heading">Card detials</div>
{insuranceList.map((m, index) => (
<InsuranceList
key={index}
value={m}
index={index}
text={getInsuranceStatusText(m.editStatus)}
/>
))}
</div>
to child component
const{value}=props
return(
<div className="insurance-body">
<div className="insurance-icon-name">
<div className="drop-down-icon" onClick={() => openDrawer(index)}>
<img src={show.visible ? downArrow : rightArrow} />
</div>
<div className="name-bold">{value.details.insuranceName}</div>
</div>
<div className="insurance-icon-name">
<div className="insurance-status">{text}</div>
<div className="insurance-status-icon">
{getInsuranceStatus(value.editStatus)}
</div>
</div>
</div>
{show.visible && (
<div className="dropDown-container">
{!value.details.ssn && (
<React.Fragment>
<div className="text-container">
<div className="text-heading">Member / Subscriber ID</div>
<div className="text">{value.details.memberId}</div>
</div>
{/* {value.details.groupNumber.trim() !== '' && ( */}
<div className="text-container">
<div className="text-heading">Group number</div>
<div className="text">{value.detials.groupNumber}</div>
</div>
{/* )} */}
</React.Fragment>
)}
<div className="text-container">
<div className="text-heading">Subscriber name</div>
<div className="text">John (optional middle) Dee</div>
</div>
<div className="text-container">
<div className="text-heading">Subscriber date of birth</div>
<div className="text">04/12/2000</div>
</div>
<div className="text-container">
<div className="text-heading">Relationship to the patient</div>
<div className="text">Mother</div>
</div>
</div>
)}
)
Problem which I am facing is when Child component loads it gives error that value.detials.groupNumber is undefined, Although object is present inside the json object. By clicking button I can console the value.detials.groupNumber it prints the data but it is not displaying it on HTML side it shows Empty
Chances there's a list item without a groupNumber
Consider using conditional rendering like this
{value.detials.groupNumber &&
<div className="text">{value.detials.groupNumber}</div>
}
Note:
You have a typo on, it should be details, and not detials
I am having a text box which I am filling from the Json response as below
<div class="gadget-body" style="height:100px">
<label>{{ textData}}</label>
</div>
But now my Json is returning html code with <p> and <h1> tags. I am binding the response, but it is displaying with <p> and <h1> tags instead of applying it.
The simple and easiest way is use innerhtml tag
<div class="gadget-body" >
<div [innerHTML]="textData">
</div>
</div>
Maybe have a function like this :
function htmlToPlaintext(text) {
return text ? String(text).replace(/<[^>]+>/gm, '') : '';
}
and then you'd use:
<div class="gadget-body" style="height:100px">
<label>{{ htmlToPlaintext(textData) }}</label>
</div>