Develop Reference

react.js image onClick not working for some reason, while same function works for another div

i am making Faq questions in react and my question div displays text when clicked on whole body as shown below:
Here is my react code. div with class "question-body" works with onclick but when I click the Plus img it has no action,any mistakes?
export default function Question({data}){
let imagid = 'img'+data.id;
function toggle(){
document.getElementById(data.id).classList.toggle('question-p') ;
document.getElementById(imagid).classList.toggle('rotateimg');
}
return(
<div className="column width100 question">
<div onClick={() => toggle()} className="question-body">
<div className="flex-between">
<label className="faq-question">{data.question}</label>
<img onClick={() => toggle()} id={imagid} className='togglequestion' src={togglequestion}></img>
</div>
<p id={data.id} className='none' dangerouslySetInnerHTML={{ __html: data.answer }}></p>
</div>
</div>
)
}

even though the answer is pretty simple here, it would require you to redo most of your code.
In order to be working with React.js effectively, you need to learn the basics (component state management,... ) - https://reactjs.org/docs/getting-started.html
I highly encourage you not to use dangerouslySetInnerHTML as it can expose your code to easy exploits.
With React.js, you don’t really want to use Document Object Model APIs (via toggle function)

how to use template literal strings for modular css with JSX?

I want to be able to give a different className when mapping through an array of images like so:
{array.map((step, i) => {
return (
<>
<img className={styles.img`${i}`} />
</>
)
})}
However I keep getting an error on Gatsby:
Error in function eval in ...file path
and then
filepath_module_scss__WEBPACK_IMPORTED_MODULE_1_.default.img is not a function
What syntax error am I doing here? How can I dynamically change classNames if not like this?

I am not sure how your styles look like but maybe that would work:
<img className={styles.img[i]} />
or
<img className={styles[`img${i}`]} />

Can't load a local background image in ReactJS

I'm having some problems taking an image from my local machine with my React App.
I'm trying to take image like
style={{ backgroundImage: `url(../../assets/images/games/${img}))` }}
But it's not working, and I don't understand why.
My file is located in
C:\Users\Me\Desktop\myreactapp\src\routes\GameSlider\index.js
And my images are in
C:\Users\Me\Desktop\myreactapp\src\assets\images\games
This is how my index.js looks now (without imports):
const GameSlider = ( { key, id, name, img, minPrice, maxSlots } ) => {
return (
<div key={key}>
<div className="home-games">
<div className="img" style={{ backgroundImage: `url(../../assets/images/games/${img}))` }} alt="..." />
<div className="price">
<IntlMessages id="gameSlider.startingAt" />
<p>
<span className="min">{minPrice}</span>
<span className="per-slot">
<IntlMessages id="gameSlider.perSlot" />
</span>
</p>
</div>
<span className="title">{name}</span>
<div className="features">
<Col span={24} className="feature">
<Icon type="lock" /> <IntlMessages id="gameSlider.upTo" /> {maxSlots} <IntlMessages id="general.slots" />
</Col>
</div>
<Link to={`/order/${id}`}><Button className="comet-buy-button" style={{ background: 'rgb(241,89,89)', borderRadius: '20px' }}>BUY NOW!</Button></Link>
</div>
</div>
);
}
export default GameSlider;

1 - Import your img:
import img from '../../pics/asteroids.jpg'
2 - And then use it:
<div style={{backgroundImage: `url(${img})`}}>Test</div>
On your page this div will look like this:
<div style="background-image: url("/static/media/asteroids.c8ab11b3.jpg");">Test</div>

Absolute path and relative path is always one of the issue for developers to fix :P so there is a another way to solve this easily.
You can use something like this:
import the whatever image in the namespace
import backgroundImg from '../images/BackgroundImage.jpg';
then use it the element like this
<img src={backgroundImg} />
let me know if this works.

If you want to use image or images without importing them, you should put your assets folder into the public folder and use them like below:
src='/assets/images/pic.jpeg'

I tried for hours lots of different solutions and in the end it came down to having quotes inside the url call, like this:
`url('${ImportedImage}')`
Quite weird that this happened though because in previous projects it has always worked fine without the inner quotes (actually, I've noticed in the past that it worked with OR without the quotes). Only thing I've done differently this time is used the TypeScript template of create-react-app to set up the project.

react return markup from dangerouslySetInnerHTML

I have html saved from wysiwyg editor and fetched from database, I need to display the content which I usually do with
<div dangerouslySetInnerHTML={{__html: content}} />
but now I need to use the formatted content inside another component,
so I am hoping if there is a function to return the markup like this
var formattedContent = getMarkup(content)//expecting this to do what dangerouslySetInnerHTML does
<Highlight search="Condominium" >
{formattedContent}
</Highlight>
because this isn't working
<Highlight search="Condominium" >
<div dangerouslySetInnerHTML={{__html: content}} />
</Highlight>
Any help is appreciated as I am nearly struggling for with this more than a day.
What I am trying above is
npmjs.com/package/react-highlighter -- it highlight matched words, but I need to highlight not just plain text but html

The dangerouslySetInnerHTML value is an object with __html as key and your HTML content as value.
<Highlight search="Condominium" >
<div dangerouslySetInnerHTML={{__html: content}} />
</Highlight>
Update:
The Highlight component has already an Attribute innerHTML. You don't need to use dangerouslySetInnerHTML in your case.
From official Documentation:
<Highlight innerHTML={true}>{content}</Highlight>

How to set innerHTML jsx format

So I given this code:
render() {
console.log(this.props, 'ey');
const var1 = "<div className={{blahblah}} style={{width: '10px'}}>{textvar}</div>"
return (
<div dangerouslySetInnerHTML={{ __html: `${var1}` }}>
</div>
);
}
Of course that's just an example, but the var1 should be a big chunk of html file in jsx format, however doing that one renders them as they are and doesn't convert them to regular html.
I also tried setting innerHTML via refs on componentDidMount but same problem happens.
this is what it should look like when it renders:
<div class="blahblah style="width: 10px"}}>the variable text</div>
Any help would greatly appreciated. thanks!

You need to do this to use ES6 interpolated string literals (inaccurately called template literals by the spec):
<div dangerouslySetInnerHTML={{ __html: `${var1}` }}>
But this would be simpler:
<div dangerouslySetInnerHTML={{ __html: var1 }}>
However, in your string for the inner html, you may want to use an interpolated string literal if what you want is to use the values of the blahblah and textvar variables. Note you need to use class instead of className since React will just set the inner html rather than treat it as JSX and className is only for JSX.
const var1 = `<div class=${blahblah}>${textvar}</div>`;
If you are using a class, no need to also use the style keyword. Just set the width in your CSS.
You can see a working example of the above on CodePen.