Questions tagged [react-props]

ReactJS is a JS library developed by facebook. Props are the variables to be used in react components. Use tag when having doubts regarding usage of react props.

Reactjs is a JS library developed by facebook. React relies on making of components which handle variables through props.

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

-React Documentation

3283 questions
0
votes
1 answer

Why is React Native not passing on simple strings in Typescript?

new to React Native, coming from React.js. I'm trying to emulate CSS-like cascading by passing on properties, in this case colors, to a component. However, even though everything seems fine, no colours are passed to the Header component. How can I…
VictoriaStudios
  • 135
  • 1
  • 9
0
votes
1 answer

How do I pass an entire image element as a prop in React?

I am getting a JSON response that has an image property for each key. This image property is the entire image element tag with properties. I am trying to pass that down into a child component, but upon attempting to render, it just shows up as plain…
0
votes
0 answers

How to pass socket.io props to Route Component in Reactjs

In my application I need socket object to define globally and pass it to the required component const App = () => { const socket = useRef(); useEffect(() => { socket.current = io(socketEND); },[]) return ( …
Ajith
  • 2,476
  • 2
  • 17
  • 38
0
votes
0 answers

How can I filter database objects by date, based on the selected day on react calendar?

My Code fetches objects from a Mongodb collection called workoutLog, and currently displays all of them in a table. I'm able to filter them by date, but only if I hardcode the date. My page also has a React Calendar that currently displays the…
choochoo
  • 1
  • 1
0
votes
2 answers

How do I make tailwind scroll snap & smooth scroll work together in React?

I am trying to build a single page react app and I was wondering how I would apply tailwind scroll snap and smooth scroll together. Every time I enable scroll-snap in the y-direction, my code for smooth scroll no longer works. I'm a beginner to…
React 0o0
  • 1
  • 1
0
votes
1 answer

How to get object's method from child component with destructuring it in React.js

This is the object I want to pass to the child, and I want to pass getFullName function too, how can I do it, the error message says ReferenceError: firstName is not defined at getFullName (:15:22) const person = { id: 1, firstName:…
T'sen Ang
  • 29
  • 3
0
votes
0 answers

page reloads in every link click instead of re-render matched component - react

I'm creating a website. I wanna use routes logic based on this project https://github.com/quintuslabs/fashion-cube. But when I click to my routes, page reloads, even if I used Link from react-router-dom instead of anchor tag. So, I have…
0
votes
0 answers

What type should I assign to a function that takes text from an input and writes it to a variable through a useState?

I have the following function in App.tsx: const [myTxt, setMyTxt] = useState(''); const getTxt: React.MouseEventHandler | React.KeyboardEventHandler = (e: any): void => { e.preventDefault(); const target = e.target; …
Antonio
  • 43
  • 5
0
votes
1 answer

How to use NextJS Image Component to display images receiving through props?

Simply I wanna display images that I'm receiving through props import Image from "next/image"; import classes from "./book-item.module.css"; export default function FoodItems(props) { return (
  • Mohit
    • 135
    • 10
    0
    votes
    1 answer

    I can't call a function that I've assigned to an element in React

    App.jsx ` import React, { useState } from "react"; import ToDoItem from "./ToDoItem"; function App() { const [inputText, setInputText] = useState(""); const [items, setItems] = useState([]); function handleChange(event) { const newValue…
    Aria0325
    • 1
    • 2
    0
    votes
    1 answer

    How can I send and Receive props in this scenario when component being used like this {Compmonent} and not

    I'm new to react. I want to receive props from NavItemsLayout but I don't know how const NavItemsLayout = (props)=>{ return(
    Hellow World
    ) } const Navbar = ()=>{ return(
    Muhammad Umar
    • 1,291
    • 7
    • 13
    0
    votes
    0 answers

    How to send/receive props to BasicLayout (@devexpress/dx-react-scheduler)

    I'm from Angular and new to React. Im doing well but here is a problem I'm stuck at. As you can see I have BasicLayout and AppointmentForm, both are in one file. BasicLayout is being used inside AppointmentForm but not like an element i.e…
    Muhammad Umar
    • 1,291
    • 7
    • 13
    0
    votes
    1 answer

    Remove :any from component in React

    I am starting with React. I am trying to send a var and function to my component. I know that it is a bad practice to use :any that is why I want to change for a proper way. I am doing a modal and I am sending the data to my component this way. I am…
    0
    votes
    2 answers

    Passing Date object is prop in react

    I'm trying to pass a date object as a prop in react native, and access its methods to render data. The prop is passed as following:
    ayus
    • 13
    • 4
    0
    votes
    1 answer

    How to pass react router dom's Routes as props to a component?

    I want to keep the main side nav as constant which should occupy 20% of the page. Rest of the 80% of the page should have 1st row as a header nav which should be constant. and on clicking the navlinks the Routes content in row 2 should change below…