Develop Reference

How to call a component inside a custom component in React?

I want to change the body dynamically, how can i do this?
import React from 'react'
// import { Link } from 'react-router-dom'
export default function ProjectTemplate(props) {
const Css= {
"--background":`${props.isValue ? props.mode : 'red'}`
}
return (
<>
<div className="bodyCon projectCon">
<div className="bodyComponent">
<div className="aboutHeading projectHeading" style={Css}>
<h1>{props.name}</h1>
<div className="container">
<div className="projects">
</div>
</div>
</div>
</div>
</div>
</>
)
}
this is a custom component
import React from 'react'
import ProjectTemplate from '../Projects/ProjectTemplate/ProjectTemplate'
export default function Blog(props) {
return (
<>
<ProjectTemplate name='Blog' mode={props.mode} isValue={props.isValue} >
hhhh
</ProjectTemplate>
</>
)
}
this is the another component where i want to add the body of previous component dynamically, then the hhh is not display in browser
output in browser:
<div className="bodyCon projectCon">
<div className="bodyComponent">
<div className="aboutHeading projectHeading" style={Css}>
<h1>{props.name}</h1>
<div className="container">
<div className="projects">
hhh
</div>
</div>
</div>
</div>
</div>
but hhh is not visible in browser, how can i do for this output

You should read this docs, all you need here is children props

The word hhh will not be displayed because you are calling the custom component in the project template with no props name which you want to display. In your code if you render the component the Blog name will displayed only.
use this in the project template and pass the props to the childrenanme
<div className="projects">
{props.childrenanme}
</div>

To Answer your Question: Yes we can use component inside nested component in react.
In JSX expressions that contain both an opening tag and a closing tag,
the content between those tags is passed as a special prop React Documentation.
And to use these special props you have to use {props.children}.
In your example, you have passed the content b/w opening and closing tag of a custom component but forgot to use it.
In projectTemplate component use the children that you have passed while invoking the component, like this:
<div className="projects">
{props.childrenanme}
</div>

TailwindCSS and React Not Correctly Importing JSX Elements

I have two files: The main file - App.js and a JSX Element which I want to load in App.js.
element.js has the following code:
const element = () => {
return (
<div className="text-gray-100 bg-gray-800 h-64 px-4">
<h1>Test Title</h1>
<p>Lorem ipsum</p>
</div>
);
};
export default element;
The App.js file is as follows:
import './App.css';
import element from './element';
function App() {
return (
<div className="flex">
<element />
</div>
);
};
export default App;
When importing, VSC shows that "element is declared but not used", and the html page shows nothing but a white page.

In JSX, lower-case tag names are considered to be HTML tags.
However, lower-case tag names with a dot (property accessor) aren't.
See HTML tags vs React Components.
<component /> compiles to React.createElement('component') (html tag)
<Component /> compiles to React.createElement(Component)
<obj.component /> compiles to React.createElement(obj.component)

Setting external HTML in react components

I am working on a website that I want to embed an external HTML to my web page. So I tried the following ways using iframe but it only shows me a blank page with no content
import React from 'react';
function MapVisualization(props) {
return(
<div>
<iframe src="https://voyagerwsh.shinyapps.io/USMapWithCountyPolygon/?_ga=2.183050790.160516643.1596758294-1394498961.1595634152" style="border: none; width: 1\
00%; height: 850px" frameborder="0"></iframe>
</div>
);
}
export default MapVisualization;
I also used another way of implementing innerHTML:
import React from 'react';
function MapVisualization(prop) {
return(
<div dangerouslySetInnerHTML = {{ __html: 'https://voyagerwsh.shinyapps.io/USMapWithCountyPolygon/?_ga=2.183050790.160516643.1596758294-1394498961.1595634152'}} />
);
}
export default MapVisualization;
But the result looks like this:
Does anyone know how to fix this? Thanks!

style was written by wrong way, style must be object
import React from 'react';
function MapVisualization(props) {
return(
<div>
<iframe src="https://voyagerwsh.shinyapps.io/USMapWithCountyPolygon/?_ga=2.183050790.160516643.1596758294-1394498961.1595634152"
style={{ border: 'none',
width: '100%',
height: 850,
frameborder:0}}>
</iframe>
</div>
);
}
export default MapVisualization;

Edit CSS of React Components

I am using a react component react-awesome-modal as follows.
<Modal visible={this.state.visible} width="850" height="450" effect="fadeInUp" onClickAway={() => this.closeModal()}>
Now I want to add a new style overflow-y:scroll to this Modal component.
I tried doing this, but it didn't worked:
<Modal visible={this.state.visible} style={{"overflow-y":"scroll"}} width="850" height="450" effect="fadeInUp" onClickAway={() => this.closeModal()}>
Is there any way I can apply the property to this component.
PS: I had tried applying this property using chrome Devtool(Inspect element). In that, I am able to see the complete CSS that is used for this component, so I was able to update it easily (see the last line in the image)

You could try insert a div element under <Modal /> , then set the style of this div:
<Modal visible={this.state.visible} width="400" height="300" effect="fadeInUp" onClickAway={() => this.closeModal()}>
<div style={{overflowY:"scroll", height:"300px"}}>
<h1>Title</h1>
<p>Some Contents</p>
<a href="javascript:void(0);" onClick={() => this.closeModal()}>Close</a>
</div>
</Modal>
If solution above doesn't work, then try creatRef, get DOM of <Modal />, and change the style of <Modal />: (React version must be newer than 16.3)
import React, { Component } from 'react';
import Modal from 'react-awesome-modal';
class Test extends React.Component {
constructor(props) {
super(props)
this.modalRef = React.createRef() //create Ref to get DOM
}
componentDidMount(){
this.modalRef.current.style.overflowY = "scroll" //change style of Modal DOM
}
render() {
return (
<div>
<Modal visible={this.state.visible} width="400" height="300" effect="fadeInUp" onClickAway={() => this.closeModal()} ref={this.modalRef}>
<div>
<h1>Title</h1>
<p>Some Contents</p>
<a href="javascript:void(0);" onClick={() => this.closeModal()}>Close</a>
</div>
</Modal>
</div>
)
}
}

CSRF_TOKEN not found even I mentioned it in meta tag

I'm trying to integrate reactjs with laravel .
So What I did is , changed my js from vue to react by using some commands.
Then I added Example.js file under /resources/js/components .
Then I added it in app.js
require('./bootstrap');
require('./components/Example');
my Example.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
export default class Example extends Component {
render() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="card">
<div className="card-header">Example Component</div>
<div className="card-body">I'm an example component!</div>
</div>
</div>
</div>
</div>
);
}
}
if (document.getElementById('example')) {
ReactDOM.render(<Example />, document.getElementById('example'));
}
Then I added a component of Example.js in my blade file.
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class = "content">
<div id = "Example" class = "title m-b-d">
</div>
</div>
<script type = "text/javascript" src = "js/app.js"></script>
But I can't able to get the Example.js component in my blade file .
In my console, I'm getting this error
CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token
What am I missing here ?

This error is caused probably by bootstrap.js (not laravel) which cannot find proper meta tag in header. Move your meta tag (with csrf token) from <body> to <head> - this should fix the problem.