Pass an Object as props to a component in React.js | bobbyhadz

const newOne = array.map(({name, age}) => ({name, age}))

const description = products.map((val) => val.Company + " " +val.Model);

function Person({data}) {
  return (
    <div>
      <h2>{data.name}</h2>
      <h2>{data.age}</h2>
      <h2>{data.country}</h2>
    </div>
  );
}

export default function App() {
  const obj = {name: 'Alice', age: 29, country: 'Austria'};

  return (
    <div>
      <Person data={obj} />
    </div>
  );
}

1constructor() {
2    super();
3    this.state = {
4      employees: [
5        {
6          firstname: "FirstName123",
7          lasttname: "LastName123"
8        },
9        {
10          firstname: "FirstName456",
11          lasttname: "LastName456"
12        }
13      ]
14    };
15}

1render() {
2    const { employees } = this.state;  //Destructuring
3
4    return (
5      <div>
6        <div>
7          {employees.map(employee => (
8            <p key={employee.firstname}>
9              {employee.firstname} : {employee.lasttname}
10            </p>
11          ))}
12        </div>
13      </div>
14    );
15}

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// Optionally the request above could also be done as
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

<select
    className="form-control form-control-sm"
    id="assettype_id"
    disabled={!types ? 'disabled' : ''}
    onChange={this.handleChange}
    value={details.assettype_id || ''}
>
    <option value="0">Choose Type...</option>
    {popularTypes.length
        ? popularTypes.map((r, key) => (
                <Fragment key={r.id}>
                    {key === 0 && (
                        <option value="0" disabled>
                            --- POPULAR ITEMS ---
                        </option>
                    )}
                    <option key={key.Id} value={r.ID}>
                        {r.Name}
                    </option>
                </Fragment>
            ))
        : null}
    {types.length
        ? types.map((t, key) => (
                <Fragment key={t.id}>
                    {key === 0 && (
                        <option value="0" disabled>
                            --- ALL ITEMS ---
                        </option>
                    )}
                    <option key={key.Id} value={t.ID}>
                        {t.Name}
                    </option>
                </Fragment>
            ))
        : null}
</select>

// Button.jsx
import classnames from 'classnames';

function Button ({size, bgColor, textColor, children}) {
    return (
        <button className={classnames("bg-${bgColor} text-${textColor} font-bold py-2 px-4 rounded", {
    "text-xs": size === 'sm'
    "text-xl": size === 'lg',
    })}>
        {children}
    </button>
    )
};

export default Button;

function App() {

  const [formData, setFormData] = React.useState({
    email: '',
    password: '',
    confirmPassword: '',
    newsletter: true,
  })


  function changeName(event) {
    const { name, type, value, checked } = event.target
    setFormData((prevState) => {
      return {
        ...prevState,
        [name]: type === 'checkbox' ? checked : value,
      }
    })
  }

  function handleSubmit(event) {
    event.preventDefault()
    if (
      (formData.email !== '' && formData.password) === formData.confirmPassword
    ) {
      console.log('Successfully signed up')
      console.log(formData)
      if (formData.newsletter) {
        console.log('Thank you for signing up for the newsletter')
      }
    } else {
      console.log('Passwords do not match')
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type='Email'
        placeholder='Email'
        onChange={changeName}
        name='email'
        value={formData.email}
      />
      <br />
      <br />
      <input
        type='password'
        placeholder='Enter password'
        onChange={changeName}
        name='password'
        value={formData.password}
      />
      <br />
      <br />
      <input
        type='password'
        placeholder='Confirm Password'
        onChange={changeName}
        name='confirmPassword'
        value={formData.confirmPassword}
      />
      <br />
      <br />
      <input
        type='checkbox'
        id='newsletter'
        checked={formData.newsletter}
        onChange={changeName}
        name='newsletter'
      />
      <label htmlFor='newsletter'>
        Yes please sign me up for the newsletter!
      </label>
      <br />
      <br />
      <button>Submit</button>
    </form>
  )
}

export default App

import React from "react";
class TextInput extends React.Component {
  render() {
    return <input type="text" ref={this.props.inputRef} />;
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { inpVal: "" };
    this.inputRef = React.createRef();
  }
  handleSubmit = (e) => {
    e.preventDefault();
    this.setState({ inpVal: this.inputRef.current.value });
  };
 
  render() {
    return (
      <form>
        <h1>{this.state.inpVal}</h1>
        <TextInput ref={this.inputRef} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}
 
export default App;

import { forwardRef} from "react";

const TextInput = forwardRef((props, ref) => <input type="text" ref={ref} />);
export default TextInput;

function App() {
  const inputRef = useRef();

  const [inputValue, setInputValue] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    setInputValue(inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <h1>{inputValue}</h1>
      <TextInput ref={inputRef} />
      <button type="submit">Submit</button>
    </form>
  );
}

export default App;

class Hello extends Component {
  constructor (props) {
    super(props)
    this.state = { visible: true }
  }
}

 

class Hello extends Component {
    state = { visible: true }
  }
}