I have been trying to create a JSXComponent with some functionalities inside that return a JSX element as a parent.
I want something like this:
<JSXComponent someProp="value">
{({data, loading, error})} => (
<div className="Parent">
some html code...
</div>
)
</JSXComponent>
but on the output, it only returns the JSX element that returns in JSXComponent and not the contents of a function inside that JSXComponent
The result is like this:
<div className="JSXComponent">Some...</div>
Try like this using a higher order component.
const hocWrapWithParent = ({ChildComponent}) => props => (
<div className="Parent">
<ChildComponent {...props} />
</div>
);
const ChildComponent = ({someprop) => <div>some child with prop= {someprop}</div>;
const Wrapped = hocWrapWithParent({ChildComponent});
// <Wrapped someprop={'hello'} />
Related
I want to make my code cleaner and set a styled component inside JSX code...
Example:
const MyDiv = styled.div`background-color: red;`;
const MyComponent = () => { return (
<div>
<h1>Title</h1>
<MyDiv>
Some stuff...
</MyDiv>
</div>
)}
Is there a way to insert the MyDiv direct inside the JSX code, or do I need to declare it on the component?
I think you should declare it on the component. if you don't want to declare it on the component, you can insert it directly as div
Here is an example of it. Please check below.
const MyComponent = () => { return (
<div>
<h1>Title</h1>
<div style={{backgroudColor: 'red'}}>
Some stuff...
</div>
</div>
)}
If you want your seamless effect, make a new component file for your div, style it the way you want in there, then import your new div at the top of the file.
Declare a component and wrap the children like this:
const MyDiv = ({children}) => {
return <div style={{backgroundColor: 'red'}}>{children}</div>;
};
And use it
<MyDiv>
<p>test</p>
</MyDiv>
We are using react native for creating web UI as well. Here my requirement is to pass title attribute in <View/> or <Text/> component same as that of <div title="abc"> tag in HTML. Could someone please suggest and help me out.
<View>
<Text>ABC</Text>
<View/>
Something like this.
If it needs to be a variable (and it is called title):
<View>
<Text>{title}</Text>
<View/>
Same goes for TouchableOpacity.
What do you mean by using the title attribute for "View"?
here you can find every prop that "View" accepts.
Also, you can find out which props are going to use for the other React native Components, in the same way.
I think you want to know how to send params like the title to a component that we create on our own, like a container in our app:
// Container.js
import ...
.
.
.
const Container = (props) => {
// Destructuring the props
const {title, children} = props;
return (
<View style = {styles.container}>
<View style = {styles.header}> // header of your container
<Text>{title}</Text> // use title here
</View>
{children} // body of your container
</View>
)
}
export default Container;
const styles = StyleSheet.create({
// styles here
})
// Home.js
import ...
import Container from './Container.js'
.
.
.
const Home = (props) => {
return(
<Container title = 'Home'> // now we can send this param to our Container
// body as Container Children goes here
</Container>
)
}
I'm trying to present data and
the json data contains html tags. so it's shown like this in the
browser
<ul><li>Marcus</li><li>19year old</li></ul>
it literally contains html tags as text.
data['id'].map((v)=>(
<div>{v.name}</div>
<div>{v.age}</div>
))
in react how can I show only text?
Ideally you would show us an example of the json data, without seeing that this answer might not be that helpful.
You can use dangerouslySetInnerHTML to render a html string as if it were actually HTML:
const data = [
{ name: "<li>Marcus</li>", age: "<li>19 year old</li>" },
{ name: "<li>Jane</li>", age: "<li>22 year old</li>" }
];
export default function App() {
return (
<div className="App">
{data.map((v) => (
<>
<div dangerouslySetInnerHTML={{ __html: v.name }} />
<div dangerouslySetInnerHTML={{ __html: v.age }} />
</>
))}
</div>
);
}
Codesandbox:
https://codesandbox.io/s/wandering-dream-vhprd?file=/src/App.js
I solved it by using
yarn add react-html-parser
I got an advice from here
Render HTML string as real HTML in a React component
you can use this like below.
import ReactHtmlParser from 'react-html-parser';
const Component = (props) => {
const {data} = props;
return(
<div>{ReactHtmlParser(data.title)}</div>
{/* this will show bold text of hello instead of <b>hello</b> or any
other html form of json data */}
)
}
I'm trying to add a custom HTML attribute on a React component:
const Parent = () => (
<div className="parent">
<Child data-custom="foo" />
</div>
);
Where Child is another React component, but the attribute gets stripped on the output HTML. I'm aware that I could simply add the attribute on the Child root element, like so:
const Child = () => <div className="child" data-custom="foo" />
Or read the attribute in the Child component via props, but that's not what i'm looking since that would couple the attribute with the component, and I'm looking for a more contextual approach (the attribute would be used for test automation purposes).
Is there a clean way to do that in React?
I'm also considering writing a Babel plugin to add the attribute or prevent the stripping, but that would be another question.
Thanks!
React element doesn't necessarily correspond to DOM element that could have HTML attributes. React component can be rendered to multiple DOM elements or no elements at all.
If Child should be able to provide additional props or attributes to child DOM element, it should pass them explicitly:
const Child = props => <div className="child" {...props} />
This way data-custom="foo" will be passed to <div>.
For this, you can try this in your react script.
const MyCompo = () => {
return (
<div>
<p>HTML Code</p>
</div>
);
}
export default About;
Otherwise you can create class and then define your components and then export them.
import React from 'react';
import '../assets/css/style.css';
import '../assets/css/pure-min.css';
import '../assets/css/custom.css';
import 'font-awesome/css/font-awesome.min.css';
import $ from 'jquery';
class FirstScreen extends React.Component {
constructor(props) {
super(props);
this.handleLoad = this.handleLoad.bind(this);
}
componentDidMount() {
window.addEventListener('load', this.handleLoad);
}
handleLoad() {
}
render() {
return <div>HTML Code</div>;
}
}
export default FirstScreen;
You could use the below syntax
const Parent = () => (
<div className="parent">
<Child data-custom="foo"/>
</div>
);
const Child = ({...props}) => (<div className="child" {...props} />)
I have a JSON which contains JSX code i.e
var data = {"content":"<ul className='list-group'><li className='list-group-item' onClick={this.svgMapClicked}>Name: Firmino</li><li className='list-group-item' >Goals: 22</li></ul>"}
In my Component, first I import the JSON i.e
import data from './data.json';
Then I have
this.state = {footy: data}
Now in my render function, I want to display it like but get the content from the JSON data:
render() {<div><ul className='list-group'><li className='list-group-item' onClick={this.svgMapClicked}>Name: Firmino</li><li className='list-group-item' >Goals: 22</li></ul></div>};
So, here is my render function:
render(){<div>{this.state.footy.content}</div>};
Instead of the JSX tag, {this.state.footy.content} is displayed as a string. I have searched for similar issue but I was unable to find.
Instead of storing the content HTML in json, you should store the data and create the content in JSX like
var data = [
{name: 'Firmino', goals: 22}
];
this.state = {footy: data}
and in render
render() {
return <div>
<ul className='list-group'>
{this.state.footy.map((player) => {
return <React.Fragment>
<li className='list-group-item' onClick={() => this.svgMapClicked(player)}>Name: {player.name}</li>
<li className='list-group-item' >Goals: {player.goals}</li>
</React.Fragment>
})}
</ul>
</div>
};
If you absolutely need to render the HTML then, you could use dangerouslySetInnerHTML like
render() {
return <div dangerouslySetInnerHTML={ { __html : this.state.footy} } />};