** This is the Navbar.jsx component which is displayed but the Hero.jsx component isnt working in the App.jsx main page for me , i have imported the Hero.jsx the same way that I have done to the navbar ** `import…
What is the difference between <div /> and<div></div> or <Component /> and <Component> </Component> <Layout home> <section> <h2>Blog</h2> <ul> {allPostsData.map(({ id, date, title }) => ( <li key={id}> {title} <br /> {id} <br /> {date} </li> ))} </ul> </section> </Layout>…
Im learning OOP and decided to create a project using it. I feel like I'm not sure if I'm using it correctly. const btnCalculate = document.getElementById('work'); const spanOne = document.querySelector('.first'); const spanTwo = document.querySelector('.second'); class PayDay{ constructor(hours, payRate){ this.hours =…
So I have a technical misunderstanding of react function component re-renders or some sort, when they happen exactly. In the provided basic app, whenever I click on the theme icon on the far left of the navbar(Header.js component), a click…
I am new to React, so I am sorry if this is very rudimentary. I haven't found a solution online for this exact problem before coming here. Say I have to create a form with multiple input fields in a…
I tried to call a function inside onClick in stateless functional component but it's not working. It works when I use statefull component with class Clock extends React.Component and onClick={this.play}. I have st like this: const Clock = function() {…
The file Editor.js in the components directory contains this const Editor = () => { //some states const [mathEditorVisible, setMathEditorVisible] = useState(false); //some other code } This is Form.js in the utils directory: //some imports export const handleSaveFormula = (latex)…
I’m trying to create a TextInput component that has a custom view when someone’s name is typed. So for example, if the name was John, it would search for that string and add a view with John’s profile image and…
I have component const ComponentA: React.FC<ComponentAProps> = (props) => { const [invalidFields, setInvalidFields] = React.useState([]); return ( <ComponentB invalidInputs = {inavlidFields.length !== 0} /> ) Does component B rerender when the state invalidFields changes?
I have a parent component Form that has a button where on user click, it will display a child component MyWindow. The MyWindow component also has the Form component so the button will appear in MyWindow as well. How can…