gist for solid.js props

app-1.jsx

// App.jsx
//custom props
import logo from "./logo.svg";
import styles from "./App.module.css";
import { createSignal } from "solid-js";
import Child from "./Child";
function App() {
 // Create a reactive signal in the parent component
 const [parentMessage, setParentMessage] = createSignal("Hello from Parent!");
 // Custom prop: onMessageUpdate is a function that updates the parentMessage
 const customProps = {
   message: parentMessage,
   onMessageUpdate: () => setParentMessage("Updated from Parent!"),
 };
 return (
   <div>
     {/* Render the Child component and pass custom props */}
     <Child {...customProps} />
   </div>
 );
}
export default App;

app-2.jsx

// Demonstrating  the relationship between props and reactivity in Solid


import logo from "./logo.svg";
import styles from "./App.module.css";
import { createSignal } from "solid-js";
import Child from "./Child";
function App() {
  const [age, setAge] = createSignal(10);
  return (
    <div class={styles.App}>
      <Child age={age()} />
      <button onClick={() => setAge(age() + 1)}>update age</button>
    </div>
  );
}
export default App;

app-3.jsx

// using splitprops. splitProps function, as the name suggests, is mainly used for splitting props


import logo from "./logo.svg";
import styles from "./App.module.css";
import { createSignal } from "solid-js";
import Child from "./Child";
function App() {
const [age, setAge] = createSignal(10);
const [name, setName] = createSignal("koded");
const [address, setAddress] = createSignal("lagos");
return (
<div class={styles.App}>
<Child age={age()} name={name()} address={address()} />
</div>
);
}

export default App;

app-4.jsx

// childrenprops

import logo from "./logo.svg";
import styles from "./App.module.css";
function App() {
return (
<div class={styles.App}>
<Child>
<h1> hi this is a children prop</h1>
<span> logrocket blog rocks!!! </span>
</Child>
</div>
);
}

export default App;

app-5.jsx

// using condtional class in props

function App() {
return (
<div class="container m-auto">
<div class="grid grid cols-4 gap-10 my-4">
<Card title="Card Title 1" round={true} />
<Card title="Card Title 2" />
</div>
</div>
);
}

export default App;

card.jsx

// card component for our conditiotional clases example



import logo from "./logo.svg";
import styles from "./App.module.css";
import { createSignal } from "solid-js";
export function Card(props) {
  return (
    <div
      class="bg-white p-4 text-cente shadow-xl"
      classList={{ "rounded-xl": props.round }}
    >
      <h2 class="">{props.title}</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit
        architecto doloribus consequatur ipsam in quibusdam ipsum saepe
        provident nobis explicabo! Eveniet, debitis quia! Soluta quas
        necessitatibus minus culpa minima quis?
      </p>
    </div>
  );
}
export default Card;

chid-4.jsx

// utilizing the splitprops


import { splitProps } from "solid-js";
function Child(props) {
const [primaryInfo, secondaryInfo] = splitProps(props, ["age", "name"]);
return (
<div>
<p>name:{primaryInfo.name}</p>
<p>age: {primaryInfo.age}</p>
<p>secondaryinfo: {secondaryInfo.address}</p>
</div>
);
}

export default Child;

child-1.jsx

// passing the properties to the child components

function Child(props) {
 // Access reactive props directly without destructuring
 return (
   <div>
     <p>{props.message()}</p>
     <button onClick={props.onMessageUpdate}>Update Message</button>
   </div>
 );
}
export default Child;

child-2.jsx

// child component to initialize our props


function Child(props) {
  console.log(props);
  return (
    <div>
      <h3>age - {props.age}</h3>
    </div>
  );
}
export default Child;

child-3.jsx

// using mergeprops to preserve the reactivity of our props


import { mergeProps } from "solid-js";

function Child(props) {
const updatedProps = mergeProps({ name: "koded" }, props);
console.log(props);
return (
<div>
<h3>age - {updatedProps.age}</h3>
<h3>name - {updatedProps.name}</h3>
</div>
);
}

export default Child;

child-5.jsx

// extending props using splitprops

import { splitProps } from "solid-js";
function Child(props) {
 const [primaryInfo, secondaryInfo] = splitProps(props, ["age", "name"]);
 secondaryInfo.additionalProp = "Extra Data"; // Extending props
 return (
   <div>
     <p>name:{primaryInfo.name}</p>
     <p>age: {primaryInfo.age}</p>
     <p>secondaryinfo: {secondaryInfo.address}</p>
     <p>additionalProp: {secondaryInfo.additionalProp}</p> // Using the extended prop
   </div>
 );
}
export default Child;

child-6.jsx

// utilizing the splitprops in our child.jsx

function Child(props) {
return <div>{props.children}</div>;
}
export default Child;

child-7.jsx

// utilizing the childeren helper function


import { children } from "solid-js";
function Child(props) {
const childrenSample = children(() => props.children);
return <div>{childrenSample()}</div>;
}
export default Child;