This is a sample ReactJS Code:
import React from 'react';
import './App.css';
function App() {
doument.getElementById("my-id1").innerHTML = "Some Text Here"
return (
<div className="App">
<p id="my-id1"></p>
</div>
);
}
export default App;
But while Running the syntax of document.getElementById() in React Native, I get a runtime error.
What should I use instead of document.getElementById() in React Native to achieve the exact same output
I see that you want to insert text in a html tag. In React props are used to tell the component what properties it will have, sample:
const SampleComponent = props => {
return (<p> {props.text} </p>)
};
in your component:
return (
<SampleComponent text = {"Hi world"} />
)
This is a basic pattern in designing a view using React or React native. Note that you must not use HTML in react native, you must use its native analogs (View, Text, TextInput for xample).
Hi I'm not sure what you want to try to do in React Native with that.Can you plz explain maybe I'll be able to help.
doument.getElementById("my-id1").innerHTML = "Some Text Here"
is not possible in react native.
You can use useState() or states in react native to do it.
Let me know if you need more information on that.
Related
I am going through a React Learning Textbook that is explaining me about Hooks. The hooks part is working fine.
The author is illustrating how to customize Hooks with some easy to use style and related components.
I have the following code.
import React from 'react';
// import logo from './logo.svg';
import './App.css';
import StarRating from './components/StarRating';
import StarRating2 from './components/StarRating2';
import Headline from './components/Headline';
function App() {
return (
<article>
<Headline/>
<StarRating/>
<StarRating2
style={{ backgroundColor: "blue" }}
onClick={e => alert(" click")}
/>
</article>
);
}
export default App;
The component code is like this.
import { useState } from "react";
import React from "react";
import { FaStar } from "react-icons/fa";
const createArray = length => [...Array(length)];
const Star = ({ selected = false, onSelect = f => f }) => (
<FaStar color={selected ? "red" : "grey"} onClick={onSelect} />
);
const numberOfStarts = 10;
const numberDefaultState = 7;
function StarRating2({ totalStars = numberOfStarts })
{
//will hold the user’s rating
// create this variable by adding the useState hook directly to the StarRating component:
const [selectedStars, setSelectedStars] = useState(numberDefaultState);
return (
<>
<p>
This is Star Rating 2 - and it has some imporvements
</p>
{createArray(totalStars).map((n, i) => (
<Star
key={i}
selected={selectedStars > i}
onSelect= {
() => {
setSelectedStars(i + 1);
}
}
/>
))}
<p>
{selectedStars} of {totalStars} stars
</p>
</>
);
}
export default StarRating2;
Unfortunately, neither does the component display change its back ground color. Nor does it respond to a click. The app continues to run with no errors or anything. and I can see that the style properties set are visible in the component tree in the react developer tools in Firefox. So, the code is reflecting on the app for sure.
I am in the 6th chapter now, and so far, every chapter code has worked exactly as it is in the book. This one though, is not. I am unsure if this a wrong code (and perhaps, I should reach out to the author) or this is something that is no longer allowed and the book is simply out of date.
StarRating2 is a React component, you are passing couple of props to StarRating2 but you aren't using those props inside StarRating2 component. CSS styles and event handlers work on native DOM elements.
What you need to do is make use of the props that are passed to StarRating2 in from App component. You can apply the styles prop on the wrapper element that wraps all the JSX code of StarRating2 component and use onClick prop on the element which should react to the click event in some way.
To apply the background color in StarRating2 component, wrap the JSX code in a wrapper element, for example a div and then use the value of style prop on this wrapper element.
function StarRating2({ totalStars = numberOfStarts, style }) {
...
return (
<div style={style}>
...
</div>
);
}
To use the click handler, you will need to use the onClick prop and add it on any native DOM element.
You need to spread the props from the parent to a native react component , styles and eventListeners can only be attached to native components like div , button etc , if the Star component supports adding color and eventListeners through its , you can do ... rest in props and spread it to star component , if you need any help , send me a codesandbox , I will explain in that
I am currently using the react-barcode package. It is currently using the format="CODE128" format, I needed to change it to use the Code 39 Barcode Font. How to I import the font to my react project and use it in the react-barcode component. If its not possible is there any other components I can use to achieve this.
Code:
import React, { Component } from 'react';
import Barcode from 'react-barcode';
class Posts extends Component {
render () {
return (
<div>
<Barcode value="http://github.com/kciter" />
</div>
);
}
}
export default (Posts);
Display of the
code128 barcode
React-barcode doesn't use a barcode font at all.
You can just, following the docs, set format="CODE39".
<Barcode value="123456" format="CODE39" />
I'm attempting to import a React functionComponent from an SVG and then send that to another component as a prop to render that svg. With the setup below, this compiles fine, but eventually crashes when trying to render the svg in browser with:
Error: Objects are not valid as a React child (found: object with keys {$$typeof, render}). If you meant to render a collection of children, use an array instead.
Classes below are simplified. But the gist of what I'm trying to do is:
In overlay.tsx:
import { ReactComponent as icon } from "/icon.svg";
import CustomItem from "/customItem";
const Overlay: React.FC<OverlayProps> = () => {
return (
<div>
<CustomItem icon={icon}/>
</div>
);
export default Overlay;
}
and in customItem.tsx:
import React from "react";
export interface CustomItemProps {
icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
}
const CustomItem: React.FC<CustomItemProps> = ({icon}) => {
return (
<div>
{icon}
</div>
);
};
export default ApplicationsDropdownItem;
I assume my problem is somewhere around the syntax of {icon}, but I can not for the life of me find out what I'm suppose to use instead.
Answer
The icon you are importing is a component, therefore it must be called to render the JSX.
<Icon {...props}/> (correct) or {Icon(props)} (not recomended)
Since it is a component, you should also name it Icon and not icon.
Take a look at this blog post that explains SVGR.
TL;DR - Best approach for rendering components
A. Call the component in your render method with component syntax <MyComponent/> not MyComponent().
B. Instantiate your component as a variable, and pass that to your render method's JSX block.
More info
#DustInCompetent brought to light the issue of calling a component as a function inside a JSX block.
As explained here and here, that will lead to react not registering a components hooks and lead to state and other problems.
If you are implementing a High Level Component (HOC), then you should not call a component within the render method (return statement in functional components), as this leads to problems for similar registration issues of the component.
import React from "react";
import { ReactComponent as SampleIcon } from "/sample_icon.svg";
export interface CustomItemProps {
Icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
}
const CustomItem: React.FC<CustomItemProps> = (props) => {
const Temp = props.Icon as React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
return (
<div>
<Temp/>
</div>
);
};
<CustomItem Icon={SampleIcon}/>
I think you should use <Icon /> instead of {icon} because it's a component.
I am decently new to react and am now trying to add semantic ui to my website. Every time I try to load the components they show as regular html instead of how semantic ui is supposed to look.
Here is an example of a class I am exporting:
import React, { Component } from "react";
import {Radio} from 'semantic-ui-react';
const RadioExampleToggle = () => <Radio toggle />
class Contact extends Component {
render() {
return (
<div>
<h2>DEMO PAGE</h2>
<p>Just a demo.
</p>
{RadioExampleToggle()}
</div>
);
}
}
export default Contact;
This will show up as a regular radio button which is what I find weird. How do I get it to display the semantic UI versions.
Please try import CSS file from semantic-ui.
import 'semantic-ui-css/semantic.min.css'
Try this:
Put it in your index.js
const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href = "https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);
Doing it this way will also help you when your app offers theme switching functionality.
code sample
I've was testing the react-sketchapp which looks pretty neat so far.
Besides rendering the default sketch elements like Text,View,Image and so on, would it be possible to render a default react component containing HTML-Markup styled with scss?
I tried rendering the following Hello-Component:
import React from 'react';
import { render, Artboard, Text, View } from 'react-sketchapp';
const Hello = () => (
<View
name={`Hello View`}
>
<Text name="Hello Text">
<span>Hello World</span>
</Text>
</View>
);
const Document = () => (
<Artboard
name="Hello Board"
>
<Hello />
</Artboard>
);
export default (context) => {
render(<Document />, context.document.currentPage());
}
but I get the following error:
Could not find renderer for type 'span' flexToSketchJSON
Is rendering default react components including html / css to Sketch possible?
You can't render HTML elements to Sketch, same as you can't render HTML elements to React Native.
React is just a way of managing a tree of abstract components. How to render these components needs to be defined by the specific renderer you are using. react-sketchapp is a renderer that understands components which render to Sketch elements, but it does not understand HTML elements such as div. (and React Native includes a renderer which knows how to render React Native components to native mobile views, react-music is a renderer which knows how to render React Music components into audio, and so forth).
React, in and of itself, has nothing to do with HTML elements or the DOM. The react-dom renderer library is where the magic of rendering into the DOM happens. If you want to render HTML elements to Sketch, you'll need to write a React renderer which knows how to convert HTML elements to Sketch's file format.
You can export any HTML/CSS to Sketch using html-sketchapp.
It is possible.
Try looking into using React-Primitives with React-SketchApp.
https://github.com/lelandrichardson/react-primitives
It's in a few examples within React-SketchApp e.g.
https://github.com/airbnb/react-sketchapp/tree/master/examples/profile-cards-primitives