react.js – Passing data as props to every single child component every time in React

This is my React component for rendering a post. I have data object as JSON which was fetched through an API in this component.
I’d like to separate as several react components instead of putting all together in one component.
So I created like this:

const PostDetail: React.FC = () => {
  const post = usePost(); // Fetched post data by using useSelector() from redux. It looks like: {author: {name: 'name', level: 1}, content: 'hello', createdAt: 1234567, upatedAt: 1234567, comments: (), ...more than 20 properties};

  return (
    <React.Fragment>
      <PostDetailTop post={post} />
      <PostDetailContent post={post} onClickEdit={onHandleEdit} onClickDelete={onHandleDelete} />
      <PostDetailBottom post={post} />
      <PostDetailComment post={post} />
    </React.Fragment>
  )
}

interface Post {
  author: Member;
  content: string;
  createdAt: number;
  updatedAt: number;
  comments: Comment();
  ...
}

const PostDetailTop: React.FC<{post: Post}> = ({post}) => {
  const { author } = post;

  return (
    <div>author: {author.name}</div>
  );
}

const PostDetailBottom: React.FC<{post: Post}> = ({post}) => {
  const { createdAt, updatedAt } = post;

  return (
    <div>createdAt: {createdAt}, updatedAt: {updatedAt}</div>
  );
}

interface PostDetailContentProps {
  post: Post;
  onClickEdit: () => void;
  onClickDelete: () => void;
}

const PostDetailTop: React.FC<PostDetailContentProps> = ({post, onClickEdit, onClickDelete}) => {
  const { content } = post;

  return (
    <div>
      <div>{content}</div>
      <button onClick={onClickEdit}>edit</button>
      <button onClick={onClickDelete}>delete</button>
    </div>
  );
}

const PostDetailComment: React.FC<{post: Post}> = ({post}) => {
  const { comments } = post;

  return (
    <div>
    {
      comments.map(comment => <div>comment.name</div>)
    }
    </div>
  );
}

I think this approach looks ugly.
Because every single component has to get the post object as props every time even though the child component doesn’t need the other properties of the post object.
But if I pass only necessary props to the component, it has to have it’s own Props interface even if I already defined Post interface.

I’d like to make this clean, simple and maintainable component.
Which one is better? Just passing a post object or passing a destructed post object?

reactjs – How to pass all props in one variable in React?

I’m trying to assign all props in one object and pass all of them in one variable.

Here is my code:

function Slider(props){
    return (
    
        <div className="hero-wrap js-fullheight" style={{height: "1041px"}}>
            <div className="container-fluid px-0">
                <div className="row d-md-flex">
                    <img className="one-third " src={undraw}></img>
                    <div className="one-forth>
                        <div className="text mt-5">
                            <span className="subheading">{props.subheading}</span>
                            <h1 className="mb-3">{props.title}</h1>
                            <p>{props.text}</p>
                            <p><a  href="#" className="btn btn-primary">{props.btnCourses}</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

const IndexPage = () => {

    let sliderProps = {
        subheading: 'Hi',
        title: 'Hi',
        text: 'Ipsum ut nostrud excepteur qui qui quis exercitation minim Lorem',
        btnCourses: 'Hi'
    };

    return (
        <Slider props={sliderProps} />
    );
}

At here I don’t want to write them in <Slider /> and want to assign them out of the return and assign them like props={sliderProps} How can I do it?

Javascript – How do I get a function within a function component to get the props for that component?

I'm starting the study in React and I'm having trouble with this component. I want to pass the props that the Todo component receives to the handleAdd function, and the moment that function is inside the function, it is returned undisputed.
The code is as follows:

import React from 'react';
import PageHeader from '../template/PageHeader';
import Forms from '../componentes/Forms';
import List from '../componentes/List';

const Todo = (props) => {
  const handleAdd = (props) => {
    console.log(this);
  };

  return (
    
); }; export default Todo;

Javascript – How do I pass on props from the React-Router-Doms render?

I am aware that I have to use rendering to pass props to my routes. For example:

const BaseRouter = (props) => (

    
{console.log(props)} // this displays everything I need, including props.username } />
);

The problem is that only history, position and match are passed on in my room component (these come directly from React-Router-Dom).

I also tried to pass on the required props manually:

 } />

But in Room I still get undefined for props.username. Any ideas?

Unity – How are edge vertices aligned by modular props captured in a 2D grid?

For a project I am working on, I create some 3D props in Blender that can be assembled modularly on a 2D grid in Unity. In Unity I generate the grid content with these props. Given these two simple shapes (imagine a pipe or railing in top view):

sections

If they are placed next to each other in the grid as follows (left):

Connected sections

I want to make a smooth transition between the two so that their edge vertices are well aligned (snap together, see right image above). Note that the angle between the shapes is always the same. However, there are variations such as straight, left, right for each intersection and also numerous shapes.

How can I achieve this?

I thought about the following options:

  • Simply model every possible variation in the mixer and use the appropriate prop when generating the grid (I hope I can avoid this because it is a lot of work and also not reusable).
  • Rig the shapes in Blender. In Unity Move, the bone transforms accordingly so that they align (I like this idea, but is it practical?)
  • (Somehow) Mark the corner points at the edge of the shapes and move them to the position to which they belong, i.e. H. Change the network to Unity.

Are there other / better ways to do this? I am happy about hints and tips.
I also know that I am not the first to try this. Therefore, every guide is appreciated where resources need to be searched for and what terms should be searched for.

reactjs – insert data with props

With useState guarado the initial value and with the function SaveDirection I change the state in which the user enters the value of the text fields, but my user field is not entered by the users I bring the value of the props in this way (props,access).user and change its state this way setDireccion({...direccion,usuario: (props,access).user }) in the handleSubmit, however, the user field appears empty when the data is entered. Check with console.log whether you are sending the user name via the props.

What could that be?

const initialState = { estado: '',  ciudad: '', codigo_postal:0, usuario:'' }

  const (direccion, setDireccion) = useState(initialState) 

  function GuardarDireccion(event) { 
    setDireccion({...direccion, (event.target.name): event.target.value})
  }

  function handleSubmit(event) { 
    event.preventDefault();  
 setDireccion({...direccion,usuario: (props,access).user })
        async function agregarDireccion() {
                await axios.post(url, direccion); 
            }
            agregarDireccion();
  }

Javascript – Get kids and props worth in React

In reaction, children it is always one support, Please refer:

function App(props) {
  console.log(Object.keys(props)); // Veja que `children` é uma prop.

  return 
{props.children}
; } ReactDOM.render(

Olá, mundo!

, document.querySelector('#app') );



So if you want to access the entire object prop, you should stop restructuring:

function ElementPai(props){
  console.log(props.children);
  console.log(props); // <-- Agora você tem as _props_. Sempre teve, aliás. :)
}

You can still use unstructuring to access some props like you did with that support children, Please refer:

function ElementPai({ children, someOtherProp, andAnotherProp }){
  console.log(children);
  console.log(someOtherProp);
  console.log(andAnotherProp);
}

Remember that children It is a support, 🙂


Read this documentation to learn more about the restructuring.

Javascript – asynchronous nature of setState () does not display updated props of the parent component

I understand that setState() is by nature asynchronous in response, and I understand why – because JS is a single-threaded and also browser, rendering it again is a costly process. I have a very (apparently) simple problem.

I'm receiving some data from Firebase and putting that data on component status setState()so i can ship it as props to those About.js Component. What happened is that the engine at the. Jumps over setState() (of course) because it is asynchronous nature and the props in the About.js Component. The props in the About.js Components are null because they receive the initial props from the parent component, which is initially set to zero.

I've tried the entire callback approach, but I'm stuck in this little peculiarity (I hope you add an operation to choose between sync and asynchronization) setState()).

Anyway, here's the code – pretty simple. Thanks in advance for any help!

App.js

class App extends React.Component {

constructor(props) {
    super(props);

    this.state = {
        home_skills: null
    }

    this.sendSkillProps = this.sendSkillProps.bind(this);
}

sendSkillProps(delta) {
    return (previousState, currentProps) => {           
        return {...previousState, home_skills: delta}
    }
}

componentDidMount() {   

    // GET LIST HOME SKILLSET FROM FIREBASE
    const db = firebase.firestore();
    var skillset_ref = db.collection('SOME_COLLEC_ID').doc('SOME_DOC_ID');

    skillset_ref.onSnapshot((doc) => {
        if (doc.exists) {
            this.setState(this.sendSkillProps(doc.data()));
        } 

        else {              
            console.log("No such document!");
        }
    });     

}

render() {
    return (
    
); }} export default App;

About.js

export default class About extends React.Component {
constructor (props) {
    super(props);

    this.state = {}
}

componentDidMount() {       
    console.log(this.props.madskills); // LOGS AS NULL  
}

render() {
    return (
    ...

9.0 pie – dalvik vm heap props are reset on reboot

I'm using Android 9 and I've tried to change the size of the prop with the following command

setprop dalvik.vm.heapsize 384m

and then review by

getprop | grep heapsize

what returns 384m for it to work.

But after a restart, the value returns to the default value of 768 m. I also tried modifying the build.prop file by adding the lines, but the props are reset at each reboot (the file itself still shows the change).

Any help?